` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.", "attribute": "locale", "reflects": true }, { "kind": "field", "name": "svg", "type": { "text": "SVGElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_ready", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_loadToken", "type": { "text": "symbol | null" }, "privacy": "private", "default": "null" }, { "kind": "method", "name": "loadIcon", "privacy": "private", "return": { "type": { "text": "Promise<void>" } } } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "Icon filename (without .svg)", "fieldName": "name" }, { "name": "size", "type": { "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined" }, "description": "Size: small, medium, large or pixel value (e.g. \"32px\").", "default": "\"medium\"", "fieldName": "size" }, { "name": "locale", "type": { "text": "string" }, "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.", "fieldName": "locale" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-icon", "customElement": true, "modulePath": "packages/icon/icon.ts", "definitionPath": "packages/icon/icon.ts" }, { "kind": "variable", "name": "WIcon", "default": "WarpIcon", "deprecated": "Exported for backwards compatibility. Use WarpIcon." } ], "exports": [ { "kind": "js", "name": "WarpIcon", "declaration": { "name": "WarpIcon", "module": "packages/icon/icon.ts" } }, { "kind": "js", "name": "WIcon", "declaration": { "name": "WIcon", "module": "packages/icon/icon.ts" } }, { "kind": "custom-element-definition", "name": "w-icon", "declaration": { "name": "WarpIcon", "module": "packages/icon/icon.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tooltip/tooltip.ts", "declarations": [ { "kind": "class", "description": "A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.\n\nTooltips should be used sparingly and contain succinct, supplementary information.", "name": "WarpTooltip", "members": [ { "kind": "field", "name": "for", "type": { "text": "string" }, "default": "\"\"", "description": "ID of the element that triggers the tooltip on hover or focus.", "attribute": "for" }, { "kind": "field", "name": "noArrow", "type": { "text": "boolean" }, "default": "false", "description": "Hide the arrow pointing toward the tooltip target.", "attribute": "no-arrow" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the tooltip is visible or not.", "attribute": "open" }, { "kind": "field", "name": "placement", "type": { "text": "TooltipPlacement" }, "default": "\"top\"", "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.", "attribute": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right'" } }, { "kind": "field", "name": "#actualPlacement", "privacy": "private", "type": { "text": "Placement" }, "default": "\"top\"" }, { "kind": "field", "name": "showDelay", "type": { "text": "number" }, "default": "150", "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.", "attribute": "show-delay", "reflects": true }, { "kind": "field", "name": "hideDelay", "type": { "text": "number" }, "default": "0", "description": "Milliseconds to wait before hiding the tooltip on mouseout.", "attribute": "hide-delay", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "Element | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "tooltip", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "hoverBridge", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "arrow", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "beak", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "#accessibleDescription", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#cleanup", "privacy": "private", "type": { "text": "ReturnType<typeof autoUpdate> | null" }, "default": "null" }, { "kind": "field", "name": "#hoverTimeout", "privacy": "private", "type": { "text": "number | undefined" } }, { "kind": "field", "name": "handleBlur", "privacy": "private" }, { "kind": "field", "name": "handleFocus", "privacy": "private" }, { "kind": "field", "name": "handleMouseOver", "privacy": "private" }, { "kind": "field", "name": "handleKeydown", "privacy": "private" }, { "kind": "field", "name": "handleMouseOut", "privacy": "private" }, { "kind": "method", "name": "#handleForChange", "privacy": "private" }, { "kind": "method", "name": "hide", "type": { "text": "hide() => void" } }, { "kind": "method", "name": "show", "type": { "text": "show() => void" } }, { "kind": "method", "name": "#handleOpenChange", "privacy": "private" }, { "kind": "method", "name": "#startPositioning", "privacy": "private" }, { "kind": "method", "name": "#stopPositioning", "privacy": "private" }, { "kind": "method", "name": "#updatePosition", "privacy": "private" }, { "kind": "method", "name": "#updateHoverBridge", "privacy": "private" } ], "attributes": [ { "name": "for", "type": { "text": "string" }, "default": "\"\"", "description": "ID of the element that triggers the tooltip on hover or focus.", "fieldName": "for" }, { "name": "no-arrow", "type": { "text": "boolean" }, "default": "false", "description": "Hide the arrow pointing toward the tooltip target.", "fieldName": "noArrow" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the tooltip is visible or not.", "fieldName": "open" }, { "name": "placement", "type": { "text": "TooltipPlacement" }, "default": "\"top\"", "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.", "fieldName": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right'" } }, { "name": "show-delay", "type": { "text": "number" }, "default": "150", "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.", "fieldName": "showDelay" }, { "name": "hide-delay", "type": { "text": "number" }, "default": "0", "description": "Milliseconds to wait before hiding the tooltip on mouseout.", "fieldName": "hideDelay" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-tooltip", "customElement": true, "modulePath": "packages/tooltip/tooltip.ts", "definitionPath": "packages/tooltip/tooltip.ts" } ], "exports": [ { "kind": "js", "name": "WarpTooltip", "declaration": { "name": "WarpTooltip", "module": "packages/tooltip/tooltip.ts" } }, { "kind": "custom-element-definition", "name": "w-tooltip", "declaration": { "name": "WarpTooltip", "module": "packages/tooltip/tooltip.ts" } } ] }, { "kind": "javascript-module", "path": "packages/textfield/textfield.ts", "declarations": [ { "kind": "class", "description": "A single-line input component used for entering and editing textual or numeric data.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)", "name": "WarpTextField", "slots": [ { "description": "Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).", "name": "suffix" }, { "description": "Use with `<w-affix>` to include a prefix, for example a search icon.", "name": "prefix" } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.", "summary": "Mark the form field as invalid.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "string | undefined" }, "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "max", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).", "attribute": "max", "reflects": true }, { "kind": "field", "name": "min", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).", "attribute": "min", "reflects": true }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "deprecated": "Use the native `minlength` attribute", "attribute": "min-length", "reflects": true }, { "kind": "field", "name": "minlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.", "attribute": "minlength", "reflects": true }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "deprecated": "Use the native `maxlength` attribute", "attribute": "max-length", "reflects": true }, { "kind": "field", "name": "maxlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.", "attribute": "maxlength", "reflects": true }, { "kind": "field", "name": "pattern", "type": { "text": "string | undefined" }, "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)", "attribute": "pattern", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textfield when it doesn't have a value", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native readonly attribute instead.", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "string | undefined" }, "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).", "attribute": "type", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "step", "type": { "text": "number | undefined" }, "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.", "summary": "Forces `number` inputs to be a whole number of `step`", "attribute": "step", "reflects": true }, { "kind": "field", "name": "autocomplete", "type": { "text": "HTMLInputElement[\"autocomplete\"] | undefined" }, "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "formatter", "type": { "text": "((value: string) => string) | undefined" }, "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html).", "summary": "Function to format value when the input field" }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#onKeyDownHandler", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "handler", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "type": { "text": "handler(e: Event) => void" } }, { "kind": "method", "name": "prefixSlotChange", "type": { "text": "prefixSlotChange() => void" } }, { "kind": "method", "name": "suffixSlotChange", "type": { "text": "suffixSlotChange() => void" } }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.", "summary": "Mark the form field as invalid.", "fieldName": "invalid" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "size", "type": { "text": "string | undefined" }, "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.", "fieldName": "size" }, { "name": "max", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).", "fieldName": "max" }, { "name": "min", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).", "fieldName": "min" }, { "name": "min-length", "type": { "text": "number | undefined" }, "deprecated": "Use the native `minlength` attribute", "fieldName": "minLength" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.", "fieldName": "minlength" }, { "name": "max-length", "type": { "text": "number | undefined" }, "deprecated": "Use the native `maxlength` attribute", "fieldName": "maxLength" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.", "fieldName": "maxlength" }, { "name": "pattern", "type": { "text": "string | undefined" }, "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)", "fieldName": "pattern" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textfield when it doesn't have a value", "fieldName": "placeholder" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native readonly attribute instead.", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user.", "fieldName": "readonly" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission.", "fieldName": "required" }, { "name": "type", "type": { "text": "string | undefined" }, "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).", "fieldName": "type" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "fieldName": "value" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.", "fieldName": "name" }, { "name": "step", "type": { "text": "number | undefined" }, "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.", "summary": "Forces `number` inputs to be a whole number of `step`", "fieldName": "step" }, { "name": "autocomplete", "type": { "text": "HTMLInputElement[\"autocomplete\"] | undefined" }, "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.", "fieldName": "autocomplete" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-textfield", "customElement": true, "modulePath": "packages/textfield/textfield.ts", "definitionPath": "packages/textfield/textfield.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-textfield", "declaration": { "name": "WarpTextField", "module": "packages/textfield/textfield.ts" } }, { "kind": "js", "name": "WarpTextField", "declaration": { "name": "WarpTextField", "module": "packages/textfield/textfield.ts" } } ] }, { "kind": "javascript-module", "path": "packages/affix/affix.ts", "declarations": [ { "kind": "class", "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)", "name": "WarpAffix", "members": [ { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "default": "null", "summary": "Accessible label for icon-button variants.", "attribute": "aria-label", "reflects": true }, { "kind": "field", "name": "clear", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.", "summary": "Renders a clear icon button.", "attribute": "clear" }, { "kind": "field", "name": "search", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp search icon.", "summary": "Renders a search icon button.", "attribute": "search" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "\"\"", "summary": "Text label shown as prefix/suffix content.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "string | null" }, "default": "null", "summary": "Icon name rendered as prefix/suffix content.", "attribute": "icon", "reflects": true }, { "kind": "field", "name": "_icon", "readonly": true } ], "attributes": [ { "name": "aria-label", "type": { "text": "string | null" }, "default": "null", "summary": "Accessible label for icon-button variants.", "fieldName": "ariaLabel" }, { "name": "clear", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.", "summary": "Renders a clear icon button.", "fieldName": "clear" }, { "name": "search", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp search icon.", "summary": "Renders a search icon button.", "fieldName": "search" }, { "name": "label", "type": { "text": "string" }, "default": "\"\"", "summary": "Text label shown as prefix/suffix content.", "fieldName": "label" }, { "name": "icon", "type": { "text": "string | null" }, "default": "null", "summary": "Icon name rendered as prefix/suffix content.", "fieldName": "icon" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-affix", "customElement": true, "modulePath": "packages/affix/affix.ts", "definitionPath": "packages/affix/affix.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-affix", "declaration": { "name": "WarpAffix", "module": "packages/affix/affix.ts" } }, { "kind": "js", "name": "WarpAffix", "declaration": { "name": "WarpAffix", "module": "packages/affix/affix.ts" } } ] }, { "kind": "javascript-module", "path": "packages/alert/alert.ts", "declarations": [ { "kind": "class", "description": "Alert is an inline component used for displaying different types of messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)", "name": "WarpAlert", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "variant", "type": { "text": "AlertVariants" }, "default": "\"info\"", "summary": "Visual style of the alert.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'positive' | 'warning' | 'info'" } }, { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "summary": "Whether the alert is visible.", "attribute": "show", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "\"alert\"", "summary": "ARIA role announced to assistive technology.", "attribute": "role", "reflects": true } ], "attributes": [ { "name": "variant", "type": { "text": "AlertVariants" }, "default": "\"info\"", "summary": "Visual style of the alert.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'positive' | 'warning' | 'info'" } }, { "name": "show", "type": { "text": "boolean" }, "default": "false", "summary": "Whether the alert is visible.", "fieldName": "show" }, { "name": "role", "type": { "text": "string" }, "default": "\"alert\"", "summary": "ARIA role announced to assistive technology.", "fieldName": "role" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-alert", "customElement": true, "modulePath": "packages/alert/alert.ts", "definitionPath": "packages/alert/alert.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-alert", "declaration": { "name": "WarpAlert", "module": "packages/alert/alert.ts" } }, { "kind": "js", "name": "WarpAlert", "declaration": { "name": "WarpAlert", "module": "packages/alert/alert.ts" } } ] }, { "kind": "javascript-module", "path": "packages/link/link.ts", "declarations": [ { "kind": "class", "description": "Link component to use when creating links that look like buttons.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)", "name": "WarpLink", "members": [ { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focus the link after it is rendered", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style for the link/button.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined" } }, { "kind": "field", "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Render a smaller version", "attribute": "small", "reflects": true }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "The URL the link points to", "attribute": "href", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Where to display the linked URL (e.g. `_blank`)", "attribute": "target", "reflects": true }, { "kind": "field", "name": "rel", "type": { "text": "string | undefined" }, "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.", "attribute": "rel", "reflects": true }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "default": "false", "description": "Makes the link take up the full width of its parent", "attribute": "full-width", "reflects": true } ], "attributes": [ { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focus the link after it is rendered", "fieldName": "autofocus" }, { "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style for the link/button.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined" } }, { "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Render a smaller version", "fieldName": "small" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "The URL the link points to", "fieldName": "href" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.", "fieldName": "disabled" }, { "name": "target", "type": { "text": "string | undefined" }, "description": "Where to display the linked URL (e.g. `_blank`)", "fieldName": "target" }, { "name": "rel", "type": { "text": "string | undefined" }, "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.", "fieldName": "rel" }, { "name": "full-width", "type": { "text": "boolean" }, "default": "false", "description": "Makes the link take up the full width of its parent", "fieldName": "fullWidth" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-link", "customElement": true, "modulePath": "packages/link/link.ts", "definitionPath": "packages/link/link.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-link", "declaration": { "name": "WarpLink", "module": "packages/link/link.ts" } }, { "kind": "js", "name": "WarpLink", "declaration": { "name": "WarpLink", "module": "packages/link/link.ts" } } ] }, { "kind": "javascript-module", "path": "packages/button/button.ts", "declarations": [ { "kind": "class", "description": "Performs an action or renders a link with button styling.\n\nUse button variants to match action priority, risk, and context.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)", "name": "WarpButton", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }", "description": "Shadow root configuration.\nDelegates focus from the host to the internal control." }, { "kind": "field", "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.", "attribute": "type", "reflects": true, "parsedType": { "text": "'button' | 'submit' | 'reset' | undefined" } }, { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined" } }, { "kind": "field", "name": "quiet", "type": { "text": "boolean" }, "default": "false", "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.", "deprecated": "Use `variant=\"quiet\"` instead", "attribute": "quiet", "reflects": true }, { "kind": "field", "name": "iconOnly", "type": { "text": "boolean" }, "default": "false", "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.", "attribute": "icon-only", "reflects": true }, { "kind": "field", "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.", "attribute": "small", "reflects": true }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.", "attribute": "href", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Link browsing context.\nPassed to the rendered link when `href` is set.", "attribute": "target", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "rel", "type": { "text": "string | undefined" }, "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.", "attribute": "rel", "reflects": true }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "default": "false", "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.", "attribute": "full-width", "reflects": true }, { "kind": "field", "name": "buttonClass", "type": { "text": "string | undefined" }, "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.", "deprecated": "This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.", "attribute": "button-class", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "Form control name.\nUsed when the button participates in form handling.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "commandfor", "type": { "text": "string | undefined" }, "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "attribute": "commandfor" }, { "kind": "field", "name": "command", "type": { "text": "string | undefined" }, "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "attribute": "command" }, { "kind": "field", "name": "buttonEl", "type": { "text": "HTMLButtonElement | null" }, "privacy": "private" }, { "kind": "field", "name": "ariaValueTextLoading", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#ariaDescription", "privacy": "private", "type": { "text": "string | undefined" }, "readonly": true }, { "kind": "method", "name": "closestWithId", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "parameters": [ { "name": "id", "type": { "text": "string" } } ], "description": "Traverse up the shadow roots looking for the ID to support use inside other Lit components." }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } } ], "attributes": [ { "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.", "fieldName": "type", "parsedType": { "text": "'button' | 'submit' | 'reset' | undefined" } }, { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.", "fieldName": "autofocus" }, { "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined" } }, { "name": "quiet", "type": { "text": "boolean" }, "default": "false", "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.", "deprecated": "Use `variant=\"quiet\"` instead", "fieldName": "quiet" }, { "name": "icon-only", "type": { "text": "boolean" }, "default": "false", "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.", "fieldName": "iconOnly" }, { "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.", "fieldName": "small" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.", "fieldName": "loading" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.", "fieldName": "href" }, { "name": "target", "type": { "text": "string | undefined" }, "description": "Link browsing context.\nPassed to the rendered link when `href` is set.", "fieldName": "target" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.", "fieldName": "disabled" }, { "name": "rel", "type": { "text": "string | undefined" }, "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.", "fieldName": "rel" }, { "name": "full-width", "type": { "text": "boolean" }, "default": "false", "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.", "fieldName": "fullWidth" }, { "name": "button-class", "type": { "text": "string | undefined" }, "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.", "deprecated": "This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.", "fieldName": "buttonClass" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "Form control name.\nUsed when the button participates in form handling.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.", "fieldName": "value" }, { "name": "commandfor", "type": { "text": "string | undefined" }, "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "fieldName": "commandfor" }, { "name": "command", "type": { "text": "string | undefined" }, "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "fieldName": "command" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-button", "customElement": true, "modulePath": "packages/button/button.ts", "definitionPath": "packages/button/button.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-button", "declaration": { "name": "WarpButton", "module": "packages/button/button.ts" } }, { "kind": "js", "name": "WarpButton", "declaration": { "name": "WarpButton", "module": "packages/button/button.ts" } } ] }, { "kind": "javascript-module", "path": "packages/attention/attention.ts", "declarations": [ { "kind": "class", "description": "Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.\n\nAttention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.\n\nThe component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)", "name": "WarpAttention", "members": [ { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.", "attribute": "show", "reflects": true }, { "kind": "field", "name": "placement", "type": { "text": "Directions" }, "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.", "default": "\"bottom\"", "attribute": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'" } }, { "kind": "field", "name": "tooltip", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "callout", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.", "attribute": "callout", "reflects": true }, { "kind": "field", "name": "popover", "type": { "text": "boolean" }, "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.", "default": "false", "attribute": "popover", "reflects": true }, { "kind": "field", "name": "highlight", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.", "attribute": "highlight", "reflects": true }, { "kind": "field", "name": "canClose", "type": { "text": "boolean" }, "default": "false", "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.", "attribute": "can-close", "reflects": true }, { "kind": "field", "name": "noArrow", "type": { "text": "boolean" }, "default": "false", "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.", "attribute": "no-arrow", "reflects": true }, { "kind": "field", "name": "distance", "type": { "text": "number" }, "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.", "default": "8", "attribute": "distance" }, { "kind": "field", "name": "skidding", "type": { "text": "number" }, "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.", "default": "0", "attribute": "skidding" }, { "kind": "field", "name": "flip", "type": { "text": "boolean" }, "default": "false", "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.", "attribute": "flip", "reflects": true }, { "kind": "field", "name": "crossAxis", "type": { "text": "boolean" }, "default": "false", "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.", "attribute": "cross-axis", "reflects": true }, { "kind": "field", "name": "fallbackPlacements", "type": { "text": "Directions[]" }, "default": "[]", "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.", "attribute": "fallback-placements", "reflects": true }, { "kind": "method", "name": "handleDone", "type": { "text": "handleDone() => void" } }, { "kind": "method", "name": "pointingAtDirection", "type": { "text": "pointingAtDirection() => void" } }, { "kind": "method", "name": "activeAttentionType", "type": { "text": "activeAttentionType() => void" } }, { "kind": "method", "name": "defaultAriaLabel", "type": { "text": "defaultAriaLabel() => void" } }, { "kind": "method", "name": "close", "type": { "text": "close() => void" } }, { "kind": "method", "name": "keypressed", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "keypressed(e: KeyboardEvent) => void" } }, { "kind": "field", "name": "_initialPlacement" }, { "kind": "field", "name": "_actualDirection" } ], "attributes": [ { "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.", "fieldName": "show" }, { "name": "placement", "type": { "text": "Directions" }, "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.", "default": "\"bottom\"", "fieldName": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'" } }, { "name": "tooltip", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.", "fieldName": "tooltip" }, { "name": "callout", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.", "fieldName": "callout" }, { "name": "popover", "type": { "text": "boolean" }, "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.", "default": "false", "fieldName": "popover" }, { "name": "highlight", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.", "fieldName": "highlight" }, { "name": "can-close", "type": { "text": "boolean" }, "default": "false", "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.", "fieldName": "canClose" }, { "name": "no-arrow", "type": { "text": "boolean" }, "default": "false", "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.", "fieldName": "noArrow" }, { "name": "distance", "type": { "text": "number" }, "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.", "default": "8", "fieldName": "distance" }, { "name": "skidding", "type": { "text": "number" }, "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.", "default": "0", "fieldName": "skidding" }, { "name": "flip", "type": { "text": "boolean" }, "default": "false", "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.", "fieldName": "flip" }, { "name": "cross-axis", "type": { "text": "boolean" }, "default": "false", "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.", "fieldName": "crossAxis" }, { "name": "fallback-placements", "type": { "text": "Directions[]" }, "default": "[]", "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.", "fieldName": "fallbackPlacements" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-attention", "customElement": true, "modulePath": "packages/attention/attention.ts", "definitionPath": "packages/attention/attention.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-attention", "declaration": { "name": "WarpAttention", "module": "packages/attention/attention.ts" } }, { "kind": "js", "name": "WarpAttention", "declaration": { "name": "WarpAttention", "module": "packages/attention/attention.ts" } } ] }, { "kind": "javascript-module", "path": "packages/badge/badge.ts", "declarations": [ { "kind": "class", "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.", "name": "WarpBadge", "slots": [ { "description": "The content of the badge, which is typically a short string like \"New\" or \"4\".", "name": "" } ], "members": [ { "kind": "field", "name": "variant", "type": { "text": "| \"neutral\"\n\t\t| \"info\"\n\t\t| \"positive\"\n\t\t| \"warning\"\n\t\t| \"negative\"\n\t\t| \"disabled\"\n\t\t| \"price\"\n\t\t| \"sponsored\"\n\t\t| undefined" }, "default": "\"neutral\"", "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined" } }, { "kind": "field", "name": "position", "type": { "text": "\"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\" | undefined" }, "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.", "attribute": "position", "reflects": true } ], "attributes": [ { "name": "variant", "type": { "text": "| \"neutral\"\n\t\t| \"info\"\n\t\t| \"positive\"\n\t\t| \"warning\"\n\t\t| \"negative\"\n\t\t| \"disabled\"\n\t\t| \"price\"\n\t\t| \"sponsored\"\n\t\t| undefined" }, "default": "\"neutral\"", "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.", "fieldName": "variant", "parsedType": { "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined" } }, { "name": "position", "type": { "text": "\"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\" | undefined" }, "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.", "fieldName": "position" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-badge", "customElement": true, "modulePath": "packages/badge/badge.ts", "definitionPath": "packages/badge/badge.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-badge", "declaration": { "name": "WarpBadge", "module": "packages/badge/badge.ts" } }, { "kind": "js", "name": "WarpBadge", "declaration": { "name": "WarpBadge", "module": "packages/badge/badge.ts" } } ] }, { "kind": "javascript-module", "path": "packages/box/box.ts", "declarations": [ { "kind": "class", "description": "Box is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)", "name": "WarpBox", "members": [ { "kind": "field", "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.", "attribute": "bleed", "reflects": true }, { "kind": "field", "name": "bordered", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.", "attribute": "bordered", "reflects": true }, { "kind": "field", "name": "info", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.", "attribute": "info", "reflects": true }, { "kind": "field", "name": "neutral", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.", "attribute": "neutral", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "\"region\"", "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.", "attribute": "role", "reflects": true } ], "attributes": [ { "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.", "fieldName": "bleed" }, { "name": "bordered", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.", "fieldName": "bordered" }, { "name": "info", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.", "fieldName": "info" }, { "name": "neutral", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.", "fieldName": "neutral" }, { "name": "role", "type": { "text": "string" }, "default": "\"region\"", "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.", "fieldName": "role" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-box", "customElement": true, "modulePath": "packages/box/box.ts", "definitionPath": "packages/box/box.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-box", "declaration": { "name": "WarpBox", "module": "packages/box/box.ts" } }, { "kind": "js", "name": "WarpBox", "declaration": { "name": "WarpBox", "module": "packages/box/box.ts" } } ] }, { "kind": "javascript-module", "path": "packages/breadcrumb-item/breadcrumb-item.ts", "declarations": [ { "kind": "class", "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)", "name": "WarpBreadcrumbItem", "slots": [ { "description": "The breadcrumb label content.", "name": "" } ], "members": [ { "kind": "field", "name": "currentPage", "type": { "text": "boolean" }, "default": "false", "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.", "attribute": "current-page" }, { "kind": "field", "name": "href", "type": { "text": "string | null" }, "default": "null", "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.", "attribute": "href" } ], "attributes": [ { "name": "current-page", "type": { "text": "boolean" }, "default": "false", "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.", "fieldName": "currentPage" }, { "name": "href", "type": { "text": "string | null" }, "default": "null", "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.", "fieldName": "href" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-breadcrumbs", "description": "" }, "tagName": "w-breadcrumb-item", "customElement": true, "modulePath": "packages/breadcrumb-item/breadcrumb-item.ts", "definitionPath": "packages/breadcrumb-item/breadcrumb-item.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-breadcrumb-item", "declaration": { "name": "WarpBreadcrumbItem", "module": "packages/breadcrumb-item/breadcrumb-item.ts" } }, { "kind": "js", "name": "WarpBreadcrumbItem", "declaration": { "name": "WarpBreadcrumbItem", "module": "packages/breadcrumb-item/breadcrumb-item.ts" } } ] }, { "kind": "javascript-module", "path": "packages/breadcrumbs/breadcrumbs.ts", "declarations": [ { "kind": "class", "description": "Shows the navigation structure for the current page.\n\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)", "name": "WarpBreadcrumbs", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "_defaultLabel", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "description": "Accessible label for the breadcrumb navigation.\nDefaults to the localized \"You are here\" label. Set `aria-label` when the default label is not specific enough for the page." }, { "kind": "field", "name": "_label", "type": { "text": "string" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "_children", "type": { "text": "Array<Element | TemplateResult>" }, "privacy": "private", "default": "[]" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-breadcrumbs", "customElement": true, "modulePath": "packages/breadcrumbs/breadcrumbs.ts", "definitionPath": "packages/breadcrumbs/breadcrumbs.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-breadcrumbs", "declaration": { "name": "WarpBreadcrumbs", "module": "packages/breadcrumbs/breadcrumbs.ts" } }, { "kind": "js", "name": "WarpBreadcrumbs", "declaration": { "name": "WarpBreadcrumbs", "module": "packages/breadcrumbs/breadcrumbs.ts" } } ] }, { "kind": "javascript-module", "path": "packages/card/card.ts", "declarations": [ { "kind": "class", "description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)", "name": "WarpCard", "members": [ { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card is visually selected.\n\nUse this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.", "attribute": "selected", "reflects": true }, { "kind": "field", "name": "flat", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.", "attribute": "flat" }, { "kind": "field", "name": "clickable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.", "deprecated": "This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead.", "attribute": "clickable" }, { "kind": "field", "name": "buttonText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "method", "name": "keypressed", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "keypressed(e: KeyboardEvent) => void" } } ], "attributes": [ { "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card is visually selected.\n\nUse this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.", "fieldName": "selected" }, { "name": "flat", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.", "fieldName": "flat" }, { "name": "clickable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.", "deprecated": "This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead.", "fieldName": "clickable" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-card", "customElement": true, "modulePath": "packages/card/card.ts", "definitionPath": "packages/card/card.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-card", "declaration": { "name": "WarpCard", "module": "packages/card/card.ts" } }, { "kind": "js", "name": "WarpCard", "declaration": { "name": "WarpCard", "module": "packages/card/card.ts" } } ] }, { "kind": "javascript-module", "path": "packages/checkbox/checkbox.ts", "declarations": [ { "kind": "class", "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)", "name": "WarpCheckbox", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "name", "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.", "type": { "text": "string | undefined" }, "attribute": "name", "reflects": true }, { "kind": "field", "name": "_ownName", "type": { "text": "string | undefined" }, "privacy": "private" }, { "kind": "field", "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.", "attribute": "indeterminate", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "_groupInvalid", "type": { "text": "boolean | undefined" }, "privacy": "private", "description": "Internal invalid state managed by parent checkbox-group.\nNon-reflecting to avoid DOM changes during hydration." }, { "kind": "field", "name": "_groupName", "type": { "text": "string | undefined" }, "privacy": "private", "description": "Internal name managed by parent checkbox-group.\nNon-reflecting to avoid DOM changes during hydration." }, { "kind": "field", "name": "#defaultChecked", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Used for resetting." }, { "kind": "field", "name": "#invalidFromRequired", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "_computedInvalid", "type": { "text": "boolean" }, "description": "Computed invalid state: combines own invalid with group invalid", "readonly": true }, { "kind": "method", "name": "handleClick", "privacy": "private" }, { "kind": "field", "name": "#handleInvalid", "privacy": "private" }, { "kind": "field", "name": "#handleKeyDown", "privacy": "private" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "click", "type": { "text": "click() => void" } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "type": { "text": "focus(options?: FocusOptions) => void" } }, { "kind": "method", "name": "blur", "type": { "text": "blur() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the checkbox is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the checkbox", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the checkbox passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the browser's validation message if invalid", "type": { "text": "reportValidity() => boolean" } } ], "attributes": [ { "name": "name", "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.", "type": { "text": "string | undefined" }, "fieldName": "name" }, { "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.", "fieldName": "value" }, { "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.", "fieldName": "indeterminate" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-checkbox-group", "description": "" }, "tagName": "w-checkbox", "customElement": true, "modulePath": "packages/checkbox/checkbox.ts", "definitionPath": "packages/checkbox/checkbox.ts" }, { "kind": "variable", "name": "WCheckbox", "default": "WarpCheckbox", "deprecated": "Use WarpCheckbox" } ], "exports": [ { "kind": "js", "name": "WarpCheckbox", "declaration": { "name": "WarpCheckbox", "module": "packages/checkbox/checkbox.ts" } }, { "kind": "js", "name": "WCheckbox", "declaration": { "name": "WCheckbox", "module": "packages/checkbox/checkbox.ts" } }, { "kind": "custom-element-definition", "name": "w-checkbox", "declaration": { "name": "WarpCheckbox", "module": "packages/checkbox/checkbox.ts" } } ] }, { "kind": "javascript-module", "path": "packages/checkbox-group/checkbox-group.ts", "declarations": [ { "kind": "class", "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)", "name": "WarpCheckboxGroup", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasWarnedMissingName", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "_internalTabIndex", "type": { "text": "number" }, "privacy": "private", "default": "-1" }, { "kind": "field", "name": "#unsubscribeI18n", "privacy": "private", "type": { "text": "() => void | undefined" } }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the group passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the checkbox group.", "type": { "text": "focus(options?: FocusOptions) => void" } }, { "kind": "field", "name": "#handleChange", "privacy": "private" }, { "kind": "field", "name": "#handleInvalid", "privacy": "private" }, { "kind": "field", "name": "#handleSlotChange", "privacy": "private" }, { "kind": "method", "name": "#markInteracted", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "#handleI18nChange", "privacy": "private" }, { "kind": "method", "name": "#getCheckedCount", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "#applyGroupName", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#syncChildInvalid", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "isInvalid", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#getValidationAnchor", "privacy": "private", "return": { "type": { "text": "HTMLElement | undefined" } } }, { "kind": "method", "name": "#getAssignedElements", "privacy": "private", "return": { "type": { "text": "Element[]" } } }, { "kind": "method", "name": "#getRequiredMessage", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "#shouldUpdateValidity", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "changedProperties", "type": { "text": "PropertyValues<this>" } } ] }, { "kind": "method", "name": "#setValidityState", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "state", "type": { "text": "ValidityStateFlags" } } ] }, { "kind": "method", "name": "#syncInternalTabIndex", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "shouldBeFocusable", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#updateValidity", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#warnIfMissingName", "privacy": "private", "return": { "type": { "text": "void" } } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.", "fieldName": "name" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.", "fieldName": "optional" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.", "fieldName": "helpText" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-checkbox-group", "customElement": true, "modulePath": "packages/checkbox-group/checkbox-group.ts", "definitionPath": "packages/checkbox-group/checkbox-group.ts" }, { "kind": "variable", "name": "WCheckboxGroup", "default": "WarpCheckboxGroup", "deprecated": "Use WarpCheckboxGroup" } ], "exports": [ { "kind": "js", "name": "WarpCheckboxGroup", "declaration": { "name": "WarpCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } }, { "kind": "js", "name": "WCheckboxGroup", "declaration": { "name": "WCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } }, { "kind": "custom-element-definition", "name": "w-checkbox-group", "declaration": { "name": "WarpCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } } ] }, { "kind": "javascript-module", "path": "packages/combobox/combobox.ts", "declarations": [ { "kind": "class", "description": "A combobox element for text input with selectable options.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)", "name": "WarpCombobox", "members": [ { "kind": "field", "name": "options", "type": { "text": "ComboboxOption[]" }, "default": "[]", "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.", "attribute": "options" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "openOnFocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.", "attribute": "open-on-focus", "reflects": true }, { "kind": "field", "name": "selectOnBlur", "type": { "text": "boolean" }, "default": "true", "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.", "attribute": "select-on-blur", "reflects": true }, { "kind": "field", "name": "matchTextSegments", "type": { "text": "boolean" }, "default": "false", "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.", "attribute": "match-text-segments", "reflects": true }, { "kind": "field", "name": "disableStaticFiltering", "type": { "text": "boolean" }, "default": "false", "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.", "attribute": "disable-static-filtering", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "autocomplete", "type": { "text": "string | undefined" }, "default": "\"off\"", "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "#lightDomObserver", "privacy": "private", "type": { "text": "MutationObserver | undefined" } }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "_listboxId", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_id", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_helpId", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_sourceOptions", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_navigationLabelOrDisplayValue", "privacy": "private", "description": "Get the display text for the navigation option or current display value", "readonly": true }, { "kind": "field", "name": "_navigationValueOrInputValue", "privacy": "private", "description": "Get the actual value for the navigation option or current value", "readonly": true }, { "kind": "method", "name": "_createOptionsWithIdAndMatch", "privacy": "private", "return": { "type": { "text": "OptionWithIdAndMatch[]" } }, "parameters": [ { "name": "options", "type": { "text": "ComboboxOption[]" } }, { "name": "currentInputValue", "type": { "text": "string" } } ], "description": "Generate options with unique IDs and match information" }, { "kind": "method", "name": "#getOptionNodes", "privacy": "private" }, { "kind": "method", "name": "#syncOptionsFromLightDom", "privacy": "private" }, { "kind": "method", "name": "_getAriaText", "privacy": "private", "parameters": [ { "name": "options", "type": { "text": "OptionWithIdAndMatch[]" } }, { "name": "value", "type": { "text": "string" } }, { "name": "isOpen", "type": { "text": "boolean" } } ], "description": "Get ARIA text for screen readers" }, { "kind": "method", "name": "_getOptionClasses", "privacy": "private", "parameters": [ { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Get option classes" }, { "kind": "method", "name": "_handleKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "description": "Handle keyboard navigation" }, { "kind": "method", "name": "_findAndSetActiveOption", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "description": "Find and set active option based on keyboard navigation" }, { "kind": "method", "name": "_handleSelect", "privacy": "private", "parameters": [ { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Handle option selection" }, { "kind": "method", "name": "_handleChange", "privacy": "private", "parameters": [ { "name": "newValue", "type": { "text": "string" } } ], "description": "Handle input change" }, { "kind": "method", "name": "_handleFocus", "privacy": "private", "description": "Handle input focus" }, { "kind": "method", "name": "_handleBlur", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Handle input blur" }, { "kind": "method", "name": "_handleOptionClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "MouseEvent" } }, { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Handle option click" }, { "kind": "method", "name": "_handleContainerBlur", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Handle container blur" }, { "kind": "method", "name": "_renderTextMatch", "privacy": "private", "parameters": [ { "name": "display", "type": { "text": "string" } }, { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Render highlighted text match" } ], "attributes": [ { "name": "options", "type": { "text": "ComboboxOption[]" }, "default": "[]", "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.", "fieldName": "options" }, { "name": "label", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.", "fieldName": "placeholder" }, { "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.", "fieldName": "value" }, { "name": "open-on-focus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.", "fieldName": "openOnFocus" }, { "name": "select-on-blur", "type": { "text": "boolean" }, "default": "true", "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.", "fieldName": "selectOnBlur" }, { "name": "match-text-segments", "type": { "text": "boolean" }, "default": "false", "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.", "fieldName": "matchTextSegments" }, { "name": "disable-static-filtering", "type": { "text": "boolean" }, "default": "false", "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.", "fieldName": "disableStaticFiltering" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.", "fieldName": "invalid" }, { "name": "help-text", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.", "fieldName": "optional" }, { "name": "name", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.", "fieldName": "name" }, { "name": "autocomplete", "type": { "text": "string | undefined" }, "default": "\"off\"", "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.", "fieldName": "autocomplete" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-combobox", "customElement": true, "modulePath": "packages/combobox/combobox.ts", "definitionPath": "packages/combobox/combobox.ts" } ], "exports": [ { "kind": "js", "name": "WarpCombobox", "declaration": { "name": "WarpCombobox", "module": "packages/combobox/combobox.ts" } }, { "kind": "custom-element-definition", "name": "w-combobox", "declaration": { "name": "WarpCombobox", "module": "packages/combobox/combobox.ts" } } ] }, { "kind": "javascript-module", "path": "packages/datepicker/datepicker.ts", "declarations": [ { "kind": "class", "description": "A date picker allows the user to select a specific calendar date.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)", "name": "WarpDatepicker", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Indicate visually that the field is optional", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.", "attribute": "lang", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "headerFormat", "type": { "text": "string" }, "default": "\"MMMM yyyy\"", "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "header-format" }, { "kind": "field", "name": "weekdayFormat", "type": { "text": "string" }, "default": "\"EEEEEE\"", "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "weekday-format" }, { "kind": "field", "name": "isDayDisabled", "type": { "text": "((day: Date) => boolean) | undefined" }, "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar." }, { "kind": "field", "name": "dayFormat", "type": { "text": "string" }, "default": "\"PPPP\"", "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "day-format" }, { "kind": "field", "name": "isCalendarOpen", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "navigationDate", "type": { "text": "Date" } }, { "kind": "field", "name": "selectedDate", "type": { "text": "Date | null" }, "readonly": true }, { "kind": "field", "name": "month", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "weeks", "readonly": true }, { "kind": "field", "name": "calendar", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "toggleButton", "type": { "text": "HTMLButtonElement" } }, { "kind": "field", "name": "wrapper", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "previousMonthButton", "type": { "text": "HTMLButtonElement" }, "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore." }, { "kind": "field", "name": "todayCell", "type": { "text": "HTMLTableCellElement" } }, { "kind": "field", "name": "selectedCell", "type": { "text": "HTMLTableCellElement" } }, { "kind": "field", "name": "#inputLocale", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#inputValue", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#toggleCalendarOpen", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "MouseEvent | KeyboardEvent" } } ] }, { "kind": "method", "name": "#nextMonth", "privacy": "private" }, { "kind": "method", "name": "#previousMonth", "privacy": "private" }, { "kind": "field", "name": "#customValidationMessage", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "method", "name": "#dispatchChangeEvent", "privacy": "private" }, { "kind": "method", "name": "#onInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ] }, { "kind": "method", "name": "#onInputBlur", "privacy": "private" }, { "kind": "method", "name": "#onInputClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "PointerEvent" } } ] }, { "kind": "method", "name": "#onInputKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onCalendarKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onCalendarSelect", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent | KeyboardEvent" } } ] }, { "kind": "field", "name": "#validationActive", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#originalHelpText", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the textarea is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the textarea", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the textarea passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the browser's validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to clear.", "type": { "text": "setCustomValidity(message: string) => void" } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.", "fieldName": "label" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Indicate visually that the field is optional", "fieldName": "optional" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "fieldName": "invalid" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "lang", "type": { "text": "string" }, "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.", "fieldName": "lang" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.", "fieldName": "value" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "fieldName": "readonly" }, { "name": "header-format", "type": { "text": "string" }, "default": "\"MMMM yyyy\"", "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "headerFormat" }, { "name": "weekday-format", "type": { "text": "string" }, "default": "\"EEEEEE\"", "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "weekdayFormat" }, { "name": "day-format", "type": { "text": "string" }, "default": "\"PPPP\"", "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "dayFormat" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-datepicker", "customElement": true, "modulePath": "packages/datepicker/datepicker.ts", "definitionPath": "packages/datepicker/datepicker.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-datepicker", "declaration": { "name": "WarpDatepicker", "module": "packages/datepicker/datepicker.ts" } }, { "kind": "js", "name": "WarpDatepicker", "declaration": { "name": "WarpDatepicker", "module": "packages/datepicker/datepicker.ts" } } ] }, { "kind": "javascript-module", "path": "packages/expandable/expandable.ts", "declarations": [ { "kind": "class", "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)", "name": "WarpExpandable", "cssParts": [ { "description": "the root wrapper element inside the component.", "name": "base" }, { "description": "the chevron container.", "name": "chevron" } ], "slots": [ { "description": "Alternative to the `title` attribute should you need to provide some additional markup.", "name": "title" } ], "members": [ { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Controls component's expanded state", "attribute": "expanded", "reflects": true }, { "kind": "field", "name": "title", "type": { "text": "string" }, "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.", "attribute": "title" }, { "kind": "field", "name": "box", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable a Box", "attribute": "box", "reflects": true }, { "kind": "field", "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable full-width on the sm breakpoint size", "attribute": "bleed", "reflects": true }, { "kind": "field", "name": "buttonClass", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "attribute": "button-class" }, { "kind": "field", "name": "contentClass", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "attribute": "content-class" }, { "kind": "field", "name": "noChevron", "type": { "text": "boolean" }, "default": "false", "description": "Controls chevron visibility", "attribute": "no-chevron" }, { "kind": "field", "name": "animated", "type": { "text": "boolean" }, "default": "false", "description": "Will animate the expansion/collapse", "attribute": "animated" }, { "kind": "field", "name": "headingLevel", "type": { "text": "number | undefined" }, "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.", "attribute": "heading-level" }, { "kind": "field", "name": "_hasTitle", "type": { "text": "boolean" }, "privacy": "private", "default": "true", "attribute": "_hasTitle" }, { "kind": "field", "name": "_showChevronUp", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "attribute": "_showChevronUp" }, { "kind": "field", "name": "#chevronIcon", "privacy": "private", "readonly": true } ], "attributes": [ { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Controls component's expanded state", "fieldName": "expanded" }, { "name": "title", "type": { "text": "string" }, "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.", "fieldName": "title" }, { "name": "box", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable a Box", "fieldName": "box" }, { "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable full-width on the sm breakpoint size", "fieldName": "bleed" }, { "name": "button-class", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "fieldName": "buttonClass" }, { "name": "content-class", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "fieldName": "contentClass" }, { "name": "no-chevron", "type": { "text": "boolean" }, "default": "false", "description": "Controls chevron visibility", "fieldName": "noChevron" }, { "name": "animated", "type": { "text": "boolean" }, "default": "false", "description": "Will animate the expansion/collapse", "fieldName": "animated" }, { "name": "heading-level", "type": { "text": "number | undefined" }, "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.", "fieldName": "headingLevel" }, { "name": "_hasTitle", "type": { "text": "boolean" }, "default": "true", "fieldName": "_hasTitle" }, { "name": "_showChevronUp", "type": { "text": "boolean" }, "default": "false", "fieldName": "_showChevronUp" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-expandable", "customElement": true, "modulePath": "packages/expandable/expandable.ts", "definitionPath": "packages/expandable/expandable.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-expandable", "declaration": { "name": "WarpExpandable", "module": "packages/expandable/expandable.ts" } }, { "kind": "js", "name": "WarpExpandable", "declaration": { "name": "WarpExpandable", "module": "packages/expandable/expandable.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal/modal.ts", "declarations": [ { "kind": "class", "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModal", "cssProperties": [ { "name": "--w-c-modal-backdrop-color" }, { "name": "--w-c-modal-bg" }, { "name": "--w-c-modal-box-shadow" }, { "name": "--w-c-modal-color" }, { "name": "--w-c-modal-height" }, { "name": "--w-c-modal-max-height" }, { "name": "--w-c-modal-min-height" }, { "name": "--w-c-modal-translate-distance" }, { "name": "--w-c-modal-padding-bottom" }, { "name": "--w-c-modal-width" } ], "cssParts": [ { "description": "the root element inside the component (`<dialog>` element).", "name": "dialog" }, { "description": "container for all elements, direct child of `<dialog>`.", "name": "wrapper" }, { "description": "the container for the `content` slot items (children).", "name": "content" } ], "slots": [ { "description": "Typically where you would use the `w-modal-header` component.", "name": "header" }, { "description": "The main content of the modal.", "name": "content" }, { "description": "Typically where you would use the `w-modal-footer` component, for things like actions.", "name": "footer" } ], "members": [ { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.", "attribute": "show" }, { "kind": "field", "name": "contentId", "type": { "text": "string | undefined" }, "deprecated": "This ID has no effect", "attribute": "content-id" }, { "kind": "field", "name": "ignoreBackdropClicks", "type": { "text": "boolean" }, "default": "false", "description": "Ignores clicks to the backdrop when set", "attribute": "ignore-backdrop-clicks" }, { "kind": "field", "name": "dialogEl", "type": { "text": "HTMLDialogElement" }, "privacy": "private" }, { "kind": "field", "name": "dialogInnerEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "contentEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "_isClosing", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "method", "name": "open", "type": { "text": "open() => void" } }, { "kind": "method", "name": "close", "type": { "text": "close() => void" } }, { "kind": "method", "name": "handleListeners", "privacy": "private", "parameters": [ { "name": "verb", "default": "\"addEventListener\"" } ] }, { "kind": "method", "name": "eventPreventer", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "closeOnBackdropClick", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "interceptEscape", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "modifyBorderRadius", "privacy": "private" } ], "events": [ { "name": "shown", "type": { "text": "CustomEvent" } }, { "name": "hidden", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.", "fieldName": "show" }, { "name": "content-id", "type": { "text": "string | undefined" }, "deprecated": "This ID has no effect", "fieldName": "contentId" }, { "name": "ignore-backdrop-clicks", "type": { "text": "boolean" }, "default": "false", "description": "Ignores clicks to the backdrop when set", "fieldName": "ignoreBackdropClicks" } ], "mixins": [ { "name": "ProvidesCanCloseToSlotsMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-modal", "customElement": true, "modulePath": "packages/modal/modal.ts", "definitionPath": "packages/modal/modal.ts" }, { "kind": "variable", "name": "ModalMain", "default": "WarpModal", "deprecated": "Exported for backwards compatibility. Use WarpModal." } ], "exports": [ { "kind": "js", "name": "WarpModal", "declaration": { "name": "WarpModal", "module": "packages/modal/modal.ts" } }, { "kind": "js", "name": "ModalMain", "declaration": { "name": "ModalMain", "module": "packages/modal/modal.ts" } }, { "kind": "custom-element-definition", "name": "w-modal", "declaration": { "name": "WarpModal", "module": "packages/modal/modal.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal-footer/modal-footer.ts", "declarations": [ { "kind": "class", "description": "The footer section of a modal, typically where you place actions.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModalFooter", "cssProperties": [ { "description": " adjusts the flex gap between actions in the footer.", "name": "--w-c-modal-footer-gap" } ], "cssParts": [ { "description": "the container for slotted items (children).", "name": "footer" } ], "members": [], "mixins": [ { "name": "CanCloseMixin", "module": "/packages/modal/util.js" }, { "name": "ProvidesCanCloseToSlotsMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-modal", "description": "" }, "tagName": "w-modal-footer", "customElement": true, "modulePath": "packages/modal-footer/modal-footer.ts", "definitionPath": "packages/modal-footer/modal-footer.ts" }, { "kind": "variable", "name": "ModalFooter", "default": "WarpModalFooter", "deprecated": "Exported for backwards compatibility. Use WarpModalFooter." } ], "exports": [ { "kind": "js", "name": "WarpModalFooter", "declaration": { "name": "WarpModalFooter", "module": "packages/modal-footer/modal-footer.ts" } }, { "kind": "js", "name": "ModalFooter", "declaration": { "name": "ModalFooter", "module": "packages/modal-footer/modal-footer.ts" } }, { "kind": "custom-element-definition", "name": "w-modal-footer", "declaration": { "name": "WarpModalFooter", "module": "packages/modal-footer/modal-footer.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal-header/modal-header.ts", "declarations": [ { "kind": "class", "description": "The header section of a modal, typically where you place the title and a close button.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModalHeader", "cssProperties": [ { "name": "--w-c-modal-header-font-size" }, { "name": "--w-c-modal-header-line-height" }, { "name": "--w-c-modal-header-margin-bottom" } ], "cssParts": [ { "description": "the root element inside the component.", "name": "header" }, { "description": "the container for the image (`top` slot).", "name": "top" }, { "description": "the back button, if visible.", "name": "back" }, { "description": "the title element.", "name": "title" }, { "description": "the close button, if visible.", "name": "close" } ], "slots": [ { "description": "Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.", "name": "top" } ], "members": [ { "kind": "field", "name": "title", "type": { "text": "string" }, "description": "A short but descriptive title for the modal", "attribute": "title" }, { "kind": "field", "name": "back", "type": { "text": "boolean" }, "default": "false", "description": "Whether the modal header should have a back button", "attribute": "back" }, { "kind": "field", "name": "noClose", "type": { "text": "boolean" }, "default": "false", "description": "Lets you hide the close button in the header", "attribute": "no-close" }, { "kind": "field", "name": "_hasTopContent", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "titleEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "method", "name": "emitBack", "privacy": "private" }, { "kind": "method", "name": "handleTopSlotChange", "privacy": "private", "parameters": [ { "name": "slotEvent", "type": { "text": "Event" } } ] } ], "events": [ { "name": "backClicked", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "description": "A short but descriptive title for the modal", "fieldName": "title" }, { "name": "back", "type": { "text": "boolean" }, "default": "false", "description": "Whether the modal header should have a back button", "fieldName": "back" }, { "name": "no-close", "type": { "text": "boolean" }, "default": "false", "description": "Lets you hide the close button in the header", "fieldName": "noClose" } ], "mixins": [ { "name": "CanCloseMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-modal", "description": "" }, "tagName": "w-modal-header", "customElement": true, "modulePath": "packages/modal-header/modal-header.ts", "definitionPath": "packages/modal-header/modal-header.ts" }, { "kind": "variable", "name": "ModalHeader", "default": "WarpModalHeader", "deprecated": "Exported for backwards compatibility. Use WarpModalHeader." } ], "exports": [ { "kind": "js", "name": "WarpModalHeader", "declaration": { "name": "WarpModalHeader", "module": "packages/modal-header/modal-header.ts" } }, { "kind": "js", "name": "ModalHeader", "declaration": { "name": "ModalHeader", "module": "packages/modal-header/modal-header.ts" } }, { "kind": "custom-element-definition", "name": "w-modal-header", "declaration": { "name": "WarpModalHeader", "module": "packages/modal-header/modal-header.ts" } } ] }, { "kind": "javascript-module", "path": "packages/page-indicator/page-indicator.ts", "declarations": [ { "kind": "class", "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)", "name": "WarpPageIndicator", "members": [ { "kind": "field", "name": "selectedPage", "type": { "text": "number" }, "default": "1", "description": "Currently selected page (1-based index)", "attribute": "selected-page", "reflects": true }, { "kind": "field", "name": "pageCount", "type": { "text": "number" }, "default": "1", "description": "Total number of pages", "attribute": "page-count", "reflects": true }, { "kind": "field", "name": "_validPageCount", "type": { "text": "number" }, "privacy": "private", "description": "Validated page count (minimum 1)", "readonly": true }, { "kind": "field", "name": "_validSelectedPage", "type": { "text": "number" }, "privacy": "private", "description": "Validated selected page (clamped to valid range)", "readonly": true } ], "attributes": [ { "name": "selected-page", "type": { "text": "number" }, "default": "1", "description": "Currently selected page (1-based index)", "fieldName": "selectedPage" }, { "name": "page-count", "type": { "text": "number" }, "default": "1", "description": "Total number of pages", "fieldName": "pageCount" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-page-indicator", "customElement": true, "modulePath": "packages/page-indicator/page-indicator.ts", "definitionPath": "packages/page-indicator/page-indicator.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-page-indicator", "declaration": { "name": "WarpPageIndicator", "module": "packages/page-indicator/page-indicator.ts" } }, { "kind": "js", "name": "WarpPageIndicator", "declaration": { "name": "WarpPageIndicator", "module": "packages/page-indicator/page-indicator.ts" } } ] }, { "kind": "javascript-module", "path": "packages/pagination/pagination.ts", "declarations": [ { "kind": "class", "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)", "name": "WarpPagination", "members": [ { "kind": "field", "name": "baseUrl", "type": { "text": "string | undefined" }, "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.", "attribute": "base-url", "reflects": true }, { "kind": "field", "name": "pages", "type": { "text": "number" }, "default": "0", "description": "The total number of pages.", "attribute": "pages", "reflects": true }, { "kind": "field", "name": "currentPageNumber", "type": { "text": "number" }, "default": "1", "description": "The currently active page number.", "attribute": "current-page", "reflects": true }, { "kind": "field", "name": "visiblePages", "type": { "text": "number" }, "default": "7", "description": "The maximum number of page numbers visible.", "attribute": "visible-pages", "reflects": true }, { "kind": "method", "name": "#dispatchClickPage", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "PointerEvent" } } ] } ], "events": [ { "name": "page-click", "type": { "text": "CustomEvent" }, "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form." } ], "attributes": [ { "name": "base-url", "type": { "text": "string | undefined" }, "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.", "fieldName": "baseUrl" }, { "name": "pages", "type": { "text": "number" }, "default": "0", "description": "The total number of pages.", "fieldName": "pages" }, { "name": "current-page", "type": { "text": "number" }, "default": "1", "description": "The currently active page number.", "fieldName": "currentPageNumber" }, { "name": "visible-pages", "type": { "text": "number" }, "default": "7", "description": "The maximum number of page numbers visible.", "fieldName": "visiblePages" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-pagination", "customElement": true, "modulePath": "packages/pagination/pagination.ts", "definitionPath": "packages/pagination/pagination.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-pagination", "declaration": { "name": "WarpPagination", "module": "packages/pagination/pagination.ts" } }, { "kind": "js", "name": "WarpPagination", "declaration": { "name": "WarpPagination", "module": "packages/pagination/pagination.ts" } } ] }, { "kind": "javascript-module", "path": "packages/pill/pill.ts", "declarations": [ { "kind": "class", "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)", "name": "WarpPill", "members": [ { "kind": "field", "name": "canClose", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be removable via a close button.", "attribute": "can-close" }, { "kind": "field", "name": "suggestion", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be rendered as a suggestion.", "attribute": "suggestion" }, { "kind": "field", "name": "openSrLabel", "type": { "text": "string | undefined" }, "deprecated": "Used \"open-arial-label\" instead.", "attribute": "open-sr-label" }, { "kind": "field", "name": "openAriaLabel", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the pill.", "attribute": "open-aria-label" }, { "kind": "field", "name": "closeSrLabel", "type": { "text": "string | undefined" }, "deprecated": "Used \"close-arial-label\" instead.", "attribute": "close-sr-label" }, { "kind": "field", "name": "closeAriaLabel", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the close button.", "attribute": "close-aria-label" }, { "kind": "field", "name": "openFilterSrText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "removeFilterSrText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "_labelClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_closeClasses", "privacy": "private", "readonly": true }, { "kind": "method", "name": "_onClick", "privacy": "private" }, { "kind": "method", "name": "_onClose", "privacy": "private" } ], "events": [ { "name": "w-pill-click", "type": { "text": "CustomEvent" }, "description": "Fires when the pill itself is clicked." }, { "name": "w-pill-close", "type": { "text": "CustomEvent" }, "description": "Fires when the pill's close button is clicked." } ], "attributes": [ { "name": "can-close", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be removable via a close button.", "fieldName": "canClose" }, { "name": "suggestion", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be rendered as a suggestion.", "fieldName": "suggestion" }, { "name": "open-sr-label", "type": { "text": "string | undefined" }, "deprecated": "Used \"open-arial-label\" instead.", "fieldName": "openSrLabel" }, { "name": "open-aria-label", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the pill.", "fieldName": "openAriaLabel" }, { "name": "close-sr-label", "type": { "text": "string | undefined" }, "deprecated": "Used \"close-arial-label\" instead.", "fieldName": "closeSrLabel" }, { "name": "close-aria-label", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the close button.", "fieldName": "closeAriaLabel" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-pill", "customElement": true, "modulePath": "packages/pill/pill.ts", "definitionPath": "packages/pill/pill.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-pill", "declaration": { "name": "WarpPill", "module": "packages/pill/pill.ts" } }, { "kind": "js", "name": "WarpPill", "declaration": { "name": "WarpPill", "module": "packages/pill/pill.ts" } } ] }, { "kind": "javascript-module", "path": "packages/radio/radio.ts", "declarations": [ { "kind": "class", "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)", "name": "WarpRadio", "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The name of the radio, submitted as a name/value pair with form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The radio's value. When selected, the radio group will receive this value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in a checked state (reflected to attribute).", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the radio a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in an invalid state.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "#defaultChecked", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Used for resetting." }, { "kind": "field", "name": "#invalidFromRequired", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "syncAriaDisabled", "privacy": "private" }, { "kind": "method", "name": "syncAriaChecked", "privacy": "private" }, { "kind": "field", "name": "handleClick", "privacy": "private" }, { "kind": "field", "name": "handleInvalid", "privacy": "private" }, { "kind": "field", "name": "handleKeyDown", "privacy": "private" }, { "kind": "method", "name": "isInGroup", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getRadioScope", "privacy": "private", "return": { "type": { "text": "ParentNode" } } }, { "kind": "method", "name": "getStandaloneNamedRadios", "privacy": "private", "return": { "type": { "text": "WarpRadio[]" } } }, { "kind": "method", "name": "syncStandaloneTabOrder", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "_internalTabIndex", "type": { "text": "number" }, "privacy": "private", "description": "Computed tabindex for the internal focusable element.\nPriority: group-managed > standalone-managed > default", "readonly": true }, { "kind": "method", "name": "uncheckOtherRadios", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateValidity", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "syncFormValue", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "shouldSyncFormState", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "changedProperties", "type": { "text": "PropertyValues<this>" } } ] } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "The name of the radio, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The radio's value. When selected, the radio group will receive this value.", "fieldName": "value" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in a checked state (reflected to attribute).", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the radio a required field.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in an invalid state.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-radio-group", "description": "" }, "tagName": "w-radio", "customElement": true, "modulePath": "packages/radio/radio.ts", "definitionPath": "packages/radio/radio.ts" }, { "kind": "variable", "name": "WRadio", "default": "WarpRadio", "deprecated": "Exported for backwards compatibility only, use `WarpRadio`" } ], "exports": [ { "kind": "js", "name": "WarpRadio", "declaration": { "name": "WarpRadio", "module": "packages/radio/radio.ts" } }, { "kind": "js", "name": "WRadio", "declaration": { "name": "WRadio", "module": "packages/radio/radio.ts" } }, { "kind": "custom-element-definition", "name": "w-radio", "declaration": { "name": "WarpRadio", "module": "packages/radio/radio.ts" } } ] }, { "kind": "javascript-module", "path": "packages/radio-group/radio-group.ts", "declarations": [ { "kind": "class", "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)", "name": "WarpRadioGroup", "slots": [ { "description": "Alternative to the `label` attribute should you need custom HTML.", "name": "label" }, { "description": "Alternative to the `help-text` attribute should you need custom HTML.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "hasWarnedMissingName", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "autoTabIndex", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "\"\"", "description": "Label for the radio group.", "attribute": "label" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "\"\"", "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.", "attribute": "help-text" }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Marks the radio group as invalid.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | null" }, "default": "null", "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio group and all child radios.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes selecting a radio in the the group required.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "defaultCheckedValue", "type": { "text": "string | null | undefined" }, "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "slottedHelpText", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "nameManagedRadios", "privacy": "private", "readonly": true, "default": "new WeakSet<WarpRadio>()" }, { "kind": "field", "name": "disabledManagedRadios", "privacy": "private", "readonly": true, "default": "new WeakSet<WarpRadio>()" }, { "kind": "field", "name": "unsubscribeI18n", "type": { "text": "() => void | undefined" }, "privacy": "private" }, { "kind": "field", "name": "handleRadioClick", "privacy": "private" }, { "kind": "method", "name": "getAllRadios", "privacy": "private" }, { "kind": "method", "name": "getCheckedValue", "privacy": "private", "return": { "type": { "text": "string | null" } } }, { "kind": "method", "name": "getEnabledRadios", "privacy": "private", "return": { "type": { "text": "WarpRadio[]" } }, "parameters": [ { "name": "radios", "default": "this.getAllRadios()" } ] }, { "kind": "method", "name": "selectSingleRadio", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "selected", "type": { "text": "WarpRadio" } }, { "name": "radios", "default": "this.getAllRadios()" } ] }, { "kind": "method", "name": "handleLabelClick", "privacy": "private" }, { "kind": "field", "name": "handleInvalid", "privacy": "private" }, { "kind": "field", "name": "handleHelpTextSlotChange", "privacy": "private" }, { "kind": "field", "name": "handleI18nChange", "privacy": "private" }, { "kind": "method", "name": "syncRadioElements", "privacy": "private" }, { "kind": "method", "name": "syncRadioDisabledState", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "radio", "type": { "text": "WarpRadio" } } ] }, { "kind": "method", "name": "syncTabOrder", "privacy": "private", "parameters": [ { "name": "radios", "type": { "text": "WarpRadio[]" } } ] }, { "kind": "field", "name": "emitSelectionChange", "privacy": "private" }, { "kind": "method", "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "hasSlottedContent", "privacy": "private", "parameters": [ { "name": "name", "type": { "text": "\"label\" | \"help-text\"" } } ] }, { "kind": "method", "name": "syncFormValue", "privacy": "private" }, { "kind": "method", "name": "syncSlottedHelpText", "privacy": "private" }, { "kind": "method", "name": "updateValidity", "privacy": "private" }, { "kind": "method", "name": "normalizeCheckedRadios", "privacy": "private", "parameters": [ { "name": "radios", "type": { "text": "WarpRadio[]" } } ] }, { "kind": "field", "name": "captureDefaultSelection", "privacy": "private" }, { "kind": "method", "name": "syncChildInvalid", "privacy": "private", "parameters": [ { "name": "isInvalid", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "setValidityState", "privacy": "private", "parameters": [ { "name": "state", "type": { "text": "ValidityStateFlags" } } ] }, { "kind": "method", "name": "syncHostTabIndex", "privacy": "private", "parameters": [ { "name": "shouldBeFocusable", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "warnIfMissingName", "privacy": "private" } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "\"\"", "description": "Label for the radio group.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string" }, "default": "\"\"", "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.", "fieldName": "helpText" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.", "fieldName": "optional" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Marks the radio group as invalid.", "fieldName": "invalid" }, { "name": "name", "type": { "text": "string | null" }, "default": "null", "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "fieldName": "name" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio group and all child radios.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes selecting a radio in the the group required.", "fieldName": "required" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-radio-group", "customElement": true, "modulePath": "packages/radio-group/radio-group.ts", "definitionPath": "packages/radio-group/radio-group.ts" }, { "kind": "variable", "name": "WRadioGroup", "default": "WarpRadioGroup", "deprecated": "Exported for backwards compatibility only, use `WarpRadioGroup`" } ], "exports": [ { "kind": "js", "name": "WarpRadioGroup", "declaration": { "name": "WarpRadioGroup", "module": "packages/radio-group/radio-group.ts" } }, { "kind": "js", "name": "WRadioGroup", "declaration": { "name": "WRadioGroup", "module": "packages/radio-group/radio-group.ts" } }, { "kind": "custom-element-definition", "name": "w-radio-group", "declaration": { "name": "WarpRadioGroup", "module": "packages/radio-group/radio-group.ts" } } ] }, { "kind": "javascript-module", "path": "packages/select/select.ts", "declarations": [ { "kind": "class", "description": "A dropdown component for selecting a single value.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)", "name": "WarpSelect", "members": [ { "kind": "field", "name": "autoFocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render.", "deprecated": "Use the native `autofocus` attribute instead.", "attribute": "auto-focus", "reflects": true }, { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in an invalid state.\n\nPaired with `help-text` to provide feedback about the error.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "always", "type": { "text": "boolean" }, "default": "false", "description": "Whether to always show a hint.", "deprecated": "Use `help-text` instead and only set it if you want to display the help text.", "attribute": "always", "reflects": true }, { "kind": "field", "name": "hint", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.", "deprecated": "Use `help-text` instead.", "attribute": "hint", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The content to display as the label.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a disabled state.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "deprecated": "Use the native readonly attribute instead.", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "_options", "type": { "text": "Array<TemplateResult>" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#onPageShow", "privacy": "private" }, { "kind": "field", "name": "#lightDomObserver", "privacy": "private", "type": { "text": "MutationObserver | undefined" } }, { "kind": "method", "name": "#getOptionNodes", "privacy": "private" }, { "kind": "method", "name": "#getNativeSelect", "privacy": "private" }, { "kind": "method", "name": "#hasExplicitlySelectedOption", "privacy": "private" }, { "kind": "method", "name": "#syncNativeOptionSelection", "privacy": "private", "parameters": [ { "name": "nextValue", "type": { "text": "string" } } ] }, { "kind": "method", "name": "#syncFromNativeSelect", "privacy": "private", "parameters": [ { "name": "{\n\t\tallowDefaultFirstOption = false,\n\t}", "default": "{}", "type": { "text": "{ allowDefaultFirstOption?: boolean }" } } ] }, { "kind": "method", "name": "#syncShadowOptionsFromLightDom", "privacy": "private", "parameters": [ { "name": "{\n\t\tsyncValueFromSelected = false,\n\t}", "default": "{}", "type": { "text": "{ syncValueFromSelected?: boolean }" } } ] }, { "kind": "field", "name": "#classes", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#helpTextClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#chevronClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#id", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#helpId", "privacy": "private", "readonly": true }, { "kind": "method", "name": "onChange", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "auto-focus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render.", "deprecated": "Use the native `autofocus` attribute instead.", "fieldName": "autoFocus" }, { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render", "fieldName": "autofocus" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in an invalid state.\n\nPaired with `help-text` to provide feedback about the error.", "fieldName": "invalid" }, { "name": "always", "type": { "text": "boolean" }, "default": "false", "description": "Whether to always show a hint.", "deprecated": "Use `help-text` instead and only set it if you want to display the help text.", "fieldName": "always" }, { "name": "hint", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.", "deprecated": "Use `help-text` instead.", "fieldName": "hint" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "The content to display as the label.", "fieldName": "label" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a disabled state.", "fieldName": "disabled" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "deprecated": "Use the native readonly attribute instead.", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "fieldName": "readonly" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "fieldName": "value" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-select", "customElement": true, "modulePath": "packages/select/select.ts", "definitionPath": "packages/select/select.ts" } ], "exports": [ { "kind": "js", "name": "WarpSelect", "declaration": { "name": "WarpSelect", "module": "packages/select/select.ts" } }, { "kind": "custom-element-definition", "name": "w-select", "declaration": { "name": "WarpSelect", "module": "packages/select/select.ts" } } ] }, { "kind": "javascript-module", "path": "packages/slider-thumb/slider-thumb.ts", "declarations": [ { "kind": "class", "description": "Component to place inside a `<w-slider>`.", "name": "WarpSliderThumb", "members": [ { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "default": "null", "description": "Label for the range input.", "attribute": "aria-label" }, { "kind": "field", "name": "ariaDescription", "type": { "text": "string | null" }, "default": "null", "description": "Contextual information for assistive technology, should it be needed", "attribute": "aria-description" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name of this input field in the form. The canonical source of the value is the text field.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "The initial value, if any", "attribute": "value", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Placeholder in empty text fields", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "#showTooltip", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#hideTooltip", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#syncRangeValue", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#handleValidity", "privacy": "private", "parameters": [ { "name": "error", "type": { "text": "string" } } ] }, { "kind": "method", "name": "updateFieldAfterValidation", "type": { "text": "updateFieldAfterValidation() => void" } }, { "kind": "method", "name": "#handleValueChange", "privacy": "private", "return": { "type": { "text": "Promise<{ shouldCancel: boolean; originalValue?: string }>" } }, "parameters": [ { "name": "value", "type": { "text": "string" } }, { "name": "isFromTextInput", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#onInput", "privacy": "private", "return": { "type": { "text": "Promise<boolean>" } }, "parameters": [ { "name": "e", "type": { "text": "InputEvent | CustomEvent" } } ] }, { "kind": "method", "name": "#onRangeSliderKeyDown", "privacy": "private", "return": { "type": { "text": "Promise<void>" } }, "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onInputFieldKeyDown", "privacy": "private", "return": { "type": { "text": "Promise<void>" } }, "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] } ], "events": [ { "name": "thumbreset", "type": { "text": "CustomEvent" }, "description": "Internal event used by (and stopped by) `w-slider`." }, { "name": "slidervalidity", "type": { "text": "CustomEvent" }, "description": "Internal event used by (and stopped by) `w-slider`." } ], "attributes": [ { "name": "aria-label", "type": { "text": "string | null" }, "default": "null", "description": "Label for the range input.", "fieldName": "ariaLabel" }, { "name": "aria-description", "type": { "text": "string | null" }, "default": "null", "description": "Contextual information for assistive technology, should it be needed", "fieldName": "ariaDescription" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name of this input field in the form. The canonical source of the value is the text field.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "The initial value, if any", "fieldName": "value" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Placeholder in empty text fields", "fieldName": "placeholder" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-slider", "description": "" }, "tagName": "w-slider-thumb", "customElement": true, "modulePath": "packages/slider-thumb/slider-thumb.ts", "definitionPath": "packages/slider-thumb/slider-thumb.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-slider-thumb", "declaration": { "name": "WarpSliderThumb", "module": "packages/slider-thumb/slider-thumb.ts" } }, { "kind": "js", "name": "WarpSliderThumb", "declaration": { "name": "WarpSliderThumb", "module": "packages/slider-thumb/slider-thumb.ts" } } ] }, { "kind": "javascript-module", "path": "packages/slider/slider.ts", "declarations": [ { "kind": "class", "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)", "name": "WarpSlider", "slots": [ { "description": "For single sliders place a `<w-slider-thumb>` in the default slot.", "name": "" }, { "description": "Label for the slider or range slider as a whole.", "name": "label" }, { "description": "Optional description between the label and slider.", "name": "description" }, { "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.", "name": "from" }, { "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.", "name": "to" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "openEnded", "type": { "text": "boolean" }, "default": "false", "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".", "attribute": "open-ended" }, { "kind": "field", "name": "error", "type": { "text": "string | undefined" }, "description": "Validation error text, if any", "attribute": "error", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Additional description to show below the fieldset", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Sets the form fields and fieldset in an invalid state", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures a child slider thumb has a value before allowing the containing form to submit", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "min", "type": { "text": "string | undefined" }, "description": "The minimum allowed value in the range inputs", "default": "0", "attribute": "min", "reflects": true }, { "kind": "field", "name": "max", "type": { "text": "string | undefined" }, "description": "The maximum allowed value in the range inputs", "default": "100", "attribute": "max", "reflects": true }, { "kind": "field", "name": "markers", "type": { "text": "number | undefined" }, "description": "Pass a value similar to step to create visual markers at that interval", "attribute": "markers", "reflects": true }, { "kind": "field", "name": "step", "type": { "text": "number | undefined" }, "description": "ets step on the range input to jump between values when dragging", "attribute": "step", "reflects": true }, { "kind": "field", "name": "suffix", "type": { "text": "string | undefined" }, "description": "Suffix used in text input fields and for the min and max values of the slider", "attribute": "suffix", "reflects": true }, { "kind": "field", "name": "hiddenTextfield", "type": { "text": "boolean" }, "default": "false", "description": "Should only be used in special cases", "attribute": "hidden-textfield", "reflects": true }, { "kind": "field", "name": "valueFormatter", "type": { "text": "((value: string, slot: SliderSlot) => string) | undefined" }, "description": "Formatter for the tooltip and input mask values" }, { "kind": "field", "name": "tooltipFormatter", "type": { "text": "((value: string, slot: SliderSlot) => string) | undefined" }, "description": "Overrides valueFormatter for the tooltip.\n\nUse in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip." }, { "kind": "field", "name": "labelFormatter", "type": { "text": "((slot: SliderSlot) => string) | undefined" }, "description": "Formatter for the min and max labels below the range." }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#syncSliderThumbs", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#onThumbReset", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "CustomEvent" } } ] }, { "kind": "method", "name": "#onInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ] }, { "kind": "method", "name": "#onBlur", "privacy": "private" }, { "kind": "method", "name": "#handleKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#doValidation", "privacy": "private" }, { "kind": "method", "name": "#onSliderValidity", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "CustomEvent" } } ] }, { "kind": "method", "name": "#getEdgeValue", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "boundary", "type": { "text": "string" } }, { "name": "input", "type": { "text": "WarpSliderThumb" } } ] }, { "kind": "method", "name": "#updateActiveTrack", "privacy": "private", "parameters": [ { "name": "input", "type": { "text": "WarpSliderThumb" } } ], "description": "We use CSS variables to fill the active track with a background color." }, { "kind": "method", "name": "_handleLabelSlotChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "field", "name": "_label", "readonly": true }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.", "fieldName": "tooltip" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "open-ended", "type": { "text": "boolean" }, "default": "false", "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".", "fieldName": "openEnded" }, { "name": "error", "type": { "text": "string | undefined" }, "description": "Validation error text, if any", "fieldName": "error" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Additional description to show below the fieldset", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Sets the form fields and fieldset in an invalid state", "fieldName": "invalid" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures a child slider thumb has a value before allowing the containing form to submit", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "min", "type": { "text": "string | undefined" }, "description": "The minimum allowed value in the range inputs", "default": "0", "fieldName": "min" }, { "name": "max", "type": { "text": "string | undefined" }, "description": "The maximum allowed value in the range inputs", "default": "100", "fieldName": "max" }, { "name": "markers", "type": { "text": "number | undefined" }, "description": "Pass a value similar to step to create visual markers at that interval", "fieldName": "markers" }, { "name": "step", "type": { "text": "number | undefined" }, "description": "ets step on the range input to jump between values when dragging", "fieldName": "step" }, { "name": "suffix", "type": { "text": "string | undefined" }, "description": "Suffix used in text input fields and for the min and max values of the slider", "fieldName": "suffix" }, { "name": "hidden-textfield", "type": { "text": "boolean" }, "default": "false", "description": "Should only be used in special cases", "fieldName": "hiddenTextfield" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-slider", "customElement": true, "modulePath": "packages/slider/slider.ts", "definitionPath": "packages/slider/slider.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-slider", "declaration": { "name": "WarpSlider", "module": "packages/slider/slider.ts" } }, { "kind": "js", "name": "WarpSlider", "declaration": { "name": "WarpSlider", "module": "packages/slider/slider.ts" } } ] }, { "kind": "javascript-module", "path": "packages/snackbar-item/snackbar-item.ts", "declarations": [ { "kind": "class", "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)", "name": "WarpSnackbarItem", "cssProperties": [ { "name": "--w-c-snackbar-item-radius" }, { "name": "--w-c-snackbar-item-max-width" }, { "name": "--w-c-snackbar-item-min-width" }, { "name": "--w-c-snackbar-item-padding" }, { "name": "--w-c-snackbar-item-bg" }, { "name": "--w-c-snackbar-item-action-bg-active" }, { "name": "--w-c-snackbar-item-action-bg-hover" }, { "name": "--w-c-snackbar-item-color" }, { "name": "--w-c-snackbar-item-action-color-active" }, { "name": "--w-c-snackbar-item-action-color-hover" }, { "name": "--w-c-snackbar-item-box-shadow" } ], "cssParts": [ { "description": "the container wrapping the message, icon and actions.", "name": "item" }, { "description": "the icon for the variant.", "name": "icon" }, { "description": "the default slot, body of the snackbar item.", "name": "message" }, { "description": "close and action button.", "name": "action" } ], "slots": [ { "description": "the snackbar message.", "name": "default" }, { "description": "icon preceeding the message.", "name": "icon" }, { "description": "action following the message.", "name": "action" } ], "members": [ { "kind": "field", "name": "actionPlacement", "type": { "text": "SnackbarActionPlacement" }, "default": "\"inline\"", "description": "The placement of the action and close buttons.", "attribute": "action-placement", "reflects": true, "parsedType": { "text": "'inline' | 'block'" } }, { "kind": "field", "name": "duration", "type": { "text": "number" }, "description": "How long the message should stay in the document before removing itself.", "attribute": "duration", "reflects": true }, { "kind": "field", "name": "root", "type": { "text": "HTMLDivElement | null" }, "privacy": "private" }, { "kind": "field", "name": "hasAction", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#expanded", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#durationLeft", "privacy": "private", "type": { "text": "number" } }, { "kind": "field", "name": "#lastFocused", "privacy": "private", "type": { "text": "HTMLElement | null" }, "default": "null" }, { "kind": "field", "name": "#timer", "privacy": "private", "type": { "text": "ReturnType<typeof setTimeout> | null" }, "default": "null" }, { "kind": "field", "name": "#timerPaused", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "close", "return": { "type": { "text": "void" } }, "description": "Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.", "type": { "text": "close() => void" } }, { "kind": "method", "name": "#onFocusIn", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Listen to focusin, not focus, as focus does not bubble.\n\nWe're interested in running code when an action button gets focus,\nsuch as pausing the countdown and storing the last focused element\noutside of the snackbar so we can return there when it closes.\n\nOnly save the first instance of `relatedTarget` so we don't overwrite\nit when focus moves from an action button to the close button." }, { "kind": "method", "name": "#onFocusOut", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Listen to focusout, not blur, as blur does not bubble.\n\nUnpause the countdown by clearing this.#lastFocused\nif the focus is moving outside of the snackbar item." }, { "kind": "method", "name": "#onMouseEnter", "privacy": "private" }, { "kind": "method", "name": "#onMouseLeave", "privacy": "private" }, { "kind": "method", "name": "#hasAction", "privacy": "private" } ], "attributes": [ { "name": "action-placement", "type": { "text": "SnackbarActionPlacement" }, "default": "\"inline\"", "description": "The placement of the action and close buttons.", "fieldName": "actionPlacement", "parsedType": { "text": "'inline' | 'block'" } }, { "name": "duration", "type": { "text": "number" }, "description": "How long the message should stay in the document before removing itself.", "fieldName": "duration" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-snackbar", "description": "" }, "tagName": "w-snackbar-item", "customElement": true, "modulePath": "packages/snackbar-item/snackbar-item.ts", "definitionPath": "packages/snackbar-item/snackbar-item.ts" } ], "exports": [ { "kind": "js", "name": "WarpSnackbarItem", "declaration": { "name": "WarpSnackbarItem", "module": "packages/snackbar-item/snackbar-item.ts" } }, { "kind": "custom-element-definition", "name": "w-snackbar-item", "declaration": { "name": "WarpSnackbarItem", "module": "packages/snackbar-item/snackbar-item.ts" } } ] }, { "kind": "javascript-module", "path": "packages/snackbar/snackbar.ts", "declarations": [ { "kind": "class", "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)", "name": "WarpSnackbar", "cssProperties": [ { "name": "--w-c-snackbar-container-gap" }, { "name": "--w-c-snackbar-position-bottom" }, { "name": "--w-c-snackbar-position-left" }, { "name": "--w-c-snackbar-position-right" }, { "name": "--w-c-snackbar-position-top" }, { "name": "--w-c-snackbar-z-index" } ], "cssParts": [ { "description": "the live region that positions messages on the screen.", "name": "container" } ], "slots": [ { "description": "`w-snackbar-item` gets placed inside the default slot by the `create` function.", "name": "default" } ], "members": [ { "kind": "method", "name": "create", "return": { "type": { "text": "" } }, "parameters": [ { "name": "message", "type": { "text": "string" } }, { "name": "options", "default": "{}", "type": { "text": "CreateSnackbarOptions" } } ], "description": "Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.", "type": { "text": "create(message: string, options: CreateSnackbarOptions = {}) => void" } } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-snackbar", "customElement": true, "modulePath": "packages/snackbar/snackbar.ts", "definitionPath": "packages/snackbar/snackbar.ts" } ], "exports": [ { "kind": "js", "name": "WarpSnackbar", "declaration": { "name": "WarpSnackbar", "module": "packages/snackbar/snackbar.ts" } }, { "kind": "custom-element-definition", "name": "w-snackbar", "declaration": { "name": "WarpSnackbar", "module": "packages/snackbar/snackbar.ts" } } ] }, { "kind": "javascript-module", "path": "packages/step/step.ts", "declarations": [ { "kind": "class", "description": "Individual step component that shows a single step in a process.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)", "name": "WarpStep", "members": [ { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is active.\n\nThe active step displays a filled indicator.", "attribute": "active", "reflects": true }, { "kind": "field", "name": "completed", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.", "attribute": "completed", "reflects": true }, { "kind": "field", "name": "_context", "type": { "text": "StepsContext" }, "privacy": "private", "default": "{ horizontal: false, right: false, isLast: false, isFirst: false, }" }, { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "method", "name": "setContext", "parameters": [ { "name": "context", "type": { "text": "StepsContext" } } ], "type": { "text": "setContext(context: StepsContext) => void" } }, { "kind": "method", "name": "getAriaLabel", "type": { "text": "getAriaLabel() => void" } } ], "attributes": [ { "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is active.\n\nThe active step displays a filled indicator.", "fieldName": "active" }, { "name": "completed", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.", "fieldName": "completed" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-step-indicator", "description": "" }, "tagName": "w-step", "customElement": true, "modulePath": "packages/step/step.ts", "definitionPath": "packages/step/step.ts" } ], "exports": [ { "kind": "js", "name": "WarpStep", "declaration": { "name": "WarpStep", "module": "packages/step/step.ts" } }, { "kind": "custom-element-definition", "name": "w-step", "declaration": { "name": "WarpStep", "module": "packages/step/step.ts" } } ] }, { "kind": "javascript-module", "path": "packages/step-indicator/step-indicator.ts", "declarations": [ { "kind": "class", "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)", "name": "WarpStepIndicator", "members": [ { "kind": "field", "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Display steps horizontally instead of vertically", "attribute": "horizontal", "reflects": true }, { "kind": "field", "name": "right", "type": { "text": "boolean" }, "default": "false", "description": "Align steps to the right (vertical layout only)", "attribute": "right", "reflects": true } ], "attributes": [ { "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Display steps horizontally instead of vertically", "fieldName": "horizontal" }, { "name": "right", "type": { "text": "boolean" }, "default": "false", "description": "Align steps to the right (vertical layout only)", "fieldName": "right" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-step-indicator", "customElement": true, "modulePath": "packages/step-indicator/step-indicator.ts", "definitionPath": "packages/step-indicator/step-indicator.ts" } ], "exports": [ { "kind": "js", "name": "WarpStepIndicator", "declaration": { "name": "WarpStepIndicator", "module": "packages/step-indicator/step-indicator.ts" } }, { "kind": "custom-element-definition", "name": "w-step-indicator", "declaration": { "name": "WarpStepIndicator", "module": "packages/step-indicator/step-indicator.ts" } } ] }, { "kind": "javascript-module", "path": "packages/switch/switch.ts", "declarations": [ { "kind": "class", "description": "The Switch component allows users to toggle between two states.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)", "name": "WarpSwitch", "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Name used when submitting an HTML form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is on (checked).", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is disabled.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "#initialState", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } } ], "events": [ { "name": "change", "type": { "text": "WarpSwitchChangeEvent" }, "description": "Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.", "parsedType": { "text": "{ detail: { checked: false | true, value: null | string }, initCustomEvent: { }, bubbles: false | true, cancelBubble: false | true, cancelable: false | true, composed: false | true, currentTarget: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, defaultPrevented: false | true, eventPhase: number, isTrusted: false | true, returnValue: false | true, srcElement: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, target: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, timeStamp: number, type: string, composedPath: { }, initEvent: { }, preventDefault: { }, stopImmediatePropagation: { }, stopPropagation: { }, NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 }" } } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "Name used when submitting an HTML form.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.", "fieldName": "value" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is on (checked).", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is disabled.", "fieldName": "disabled" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-switch", "customElement": true, "modulePath": "packages/switch/switch.ts", "definitionPath": "packages/switch/switch.ts" } ], "exports": [ { "kind": "js", "name": "WarpSwitch", "declaration": { "name": "WarpSwitch", "module": "packages/switch/switch.ts" } }, { "kind": "custom-element-definition", "name": "w-switch", "declaration": { "name": "WarpSwitch", "module": "packages/switch/switch.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tab/tab.ts", "declarations": [ { "kind": "class", "description": "Individual tab component used within w-tabs container.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTab", "members": [ { "kind": "field", "name": "_handleClick", "privacy": "private" }, { "kind": "field", "name": "tabindex", "type": { "text": "number" }, "default": "0", "description": "The host element (`<w-tab>`), the one with `role=tab`, must be the focusable element for assistive technology.", "attribute": "tabindex" }, { "kind": "field", "name": "for", "type": { "text": "string | undefined" }, "description": "The `id` of the `<w-tab-panel>` this tab controls.", "attribute": "for", "reflects": true }, { "kind": "field", "name": "_effectiveAriaControls", "type": { "text": "string" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "_ownAriaSelected", "type": { "text": "\"true\" | \"false\" | undefined" }, "privacy": "private" }, { "kind": "field", "name": "over", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the `icon` slot over the tab title instead of inline.", "attribute": "over", "reflects": true }, { "kind": "field", "name": "_classes", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_hasIcon", "privacy": "private", "readonly": true }, { "kind": "method", "name": "syncAriaControls", "privacy": "private" }, { "kind": "field", "name": "_internals" } ], "attributes": [ { "name": "tabindex", "type": { "text": "number" }, "default": "0", "description": "The host element (`<w-tab>`), the one with `role=tab`, must be the focusable element for assistive technology.", "fieldName": "tabindex" }, { "name": "for", "type": { "text": "string | undefined" }, "description": "The `id` of the `<w-tab-panel>` this tab controls.", "fieldName": "for" }, { "name": "over", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the `icon` slot over the tab title instead of inline.", "fieldName": "over" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-tabs", "description": "" }, "tagName": "w-tab", "customElement": true, "modulePath": "packages/tab/tab.ts", "definitionPath": "packages/tab/tab.ts" } ], "exports": [ { "kind": "js", "name": "WarpTab", "declaration": { "name": "WarpTab", "module": "packages/tab/tab.ts" } }, { "kind": "custom-element-definition", "name": "w-tab", "declaration": { "name": "WarpTab", "module": "packages/tab/tab.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tab-panel/tab-panel.ts", "declarations": [ { "kind": "class", "description": "Tab panel component that holds content for individual tabs.\n\nEach tab panel should have a name that matches a corresponding tab.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTabPanel", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "Required so `<w-tab>` has something to target.", "attribute": "id", "reflects": true }, { "kind": "field", "name": "_ownActive", "type": { "text": "boolean | undefined" }, "privacy": "private" }, { "kind": "method", "name": "syncA11yState", "privacy": "private" } ], "attributes": [ { "name": "id", "type": { "text": "string" }, "description": "Required so `<w-tab>` has something to target.", "fieldName": "id" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-tabs", "description": "" }, "tagName": "w-tab-panel", "customElement": true, "modulePath": "packages/tab-panel/tab-panel.ts", "definitionPath": "packages/tab-panel/tab-panel.ts" } ], "exports": [ { "kind": "js", "name": "WarpTabPanel", "declaration": { "name": "WarpTabPanel", "module": "packages/tab-panel/tab-panel.ts" } }, { "kind": "custom-element-definition", "name": "w-tab-panel", "declaration": { "name": "WarpTabPanel", "module": "packages/tab-panel/tab-panel.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tabs/tabs.ts", "declarations": [ { "kind": "class", "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTabs", "members": [ { "kind": "field", "name": "active", "type": { "text": "string | undefined" }, "description": "The `id` of the panel that should be active.", "default": "\"\" (Shows the first tab)", "attribute": "active", "reflects": true }, { "kind": "field", "name": "tabList", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "selectionIndicator", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "_uniqueId", "privacy": "private" }, { "kind": "field", "name": "_activeTabFor", "type": { "text": "string | undefined" }, "privacy": "private", "default": "\"\"" }, { "kind": "field", "name": "_resizeObserver", "type": { "text": "ResizeObserver | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_updateSelectionIndicatorDebounced", "privacy": "private" }, { "kind": "field", "name": "_assignSlots", "privacy": "private" }, { "kind": "method", "name": "_initializeActiveTab", "privacy": "private" }, { "kind": "field", "name": "_handleTabClick", "privacy": "private" }, { "kind": "method", "name": "_notifyTabChange", "privacy": "private" }, { "kind": "method", "name": "updateSelectionIndicator", "privacy": "private" }, { "kind": "method", "name": "updatePanels", "privacy": "private" }, { "kind": "field", "name": "_handleKeyDown", "privacy": "private" }, { "kind": "field", "name": "_tabCount", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_gridClass", "privacy": "private", "readonly": true } ], "events": [ { "name": "change", "type": { "text": "WarpTabsChangeEvent" }, "description": "Includes `details.panelId` with the now active tab panel's ID", "parsedType": { "text": "{ detail: { panelId: string }, initCustomEvent: { }, bubbles: false | true, cancelBubble: false | true, cancelable: false | true, composed: false | true, currentTarget: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, defaultPrevented: false | true, eventPhase: number, isTrusted: false | true, returnValue: false | true, srcElement: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, target: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, timeStamp: number, type: string, composedPath: { }, initEvent: { }, preventDefault: { }, stopImmediatePropagation: { }, stopPropagation: { }, NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 }" } } ], "attributes": [ { "name": "active", "type": { "text": "string | undefined" }, "description": "The `id` of the panel that should be active.", "default": "\"\" (Shows the first tab)", "fieldName": "active" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-tabs", "customElement": true, "modulePath": "packages/tabs/tabs.ts", "definitionPath": "packages/tabs/tabs.ts" } ], "exports": [ { "kind": "js", "name": "WarpTabs", "declaration": { "name": "WarpTabs", "module": "packages/tabs/tabs.ts" } }, { "kind": "custom-element-definition", "name": "w-tabs", "declaration": { "name": "WarpTabs", "module": "packages/tabs/tabs.ts" } } ] }, { "kind": "javascript-module", "path": "packages/textarea/textarea.ts", "declarations": [ { "kind": "class", "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)", "name": "WarpTextarea", "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "maxRows", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "attribute": "maximum-rows", "reflects": true }, { "kind": "field", "name": "minRows", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of text rows the textarea should display", "attribute": "minimum-rows", "reflects": true }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "attribute": "maxlength", "reflects": true }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of characters for the textarea to be valid", "attribute": "minlength", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form", "attribute": "name", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textarea when it doesn't have a value", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native `readonly` attribute instead", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "attribute": "required", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value", "attribute": "value", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Show an icon behind the label indicating the field is optional", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "minHeight", "privacy": "private" }, { "kind": "field", "name": "maxHeight", "privacy": "private" }, { "kind": "field", "name": "_textarea", "type": { "text": "HTMLTextAreaElement" }, "privacy": "private" }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#validationActive", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#originalHelpText", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#customValidationMessage", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the textarea is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the textarea", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the textarea passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to clear.", "type": { "text": "setCustomValidity(message: string) => void" } }, { "kind": "method", "name": "#getValidationMessage", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "flags", "type": { "text": "ValidityStateFlags" } }, { "name": "currentLength", "type": { "text": "number" } } ] }, { "kind": "method", "name": "handler", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ], "type": { "text": "handler(e: InputEvent) => void" } }, { "kind": "method", "name": "#redispatch", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "description": "See:\n - https://github.com/warp-ds/elements/issues/722\n - https://github.com/lit/lit-element/issues/922\n - https://developer.mozilla.org/en-US/docs/Web/API/Event/composed\n - https://pm.dartus.fr/posts/2021/shadow-dom-and-event-propagation/" }, { "kind": "method", "name": "#resize", "privacy": "private", "parameters": [ { "name": "target", "type": { "text": "HTMLTextAreaElement" } } ], "description": "Calculate the new height for the area on input" }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "events": [ { "type": {} } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "fieldName": "invalid" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "maximum-rows", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "fieldName": "maxRows" }, { "name": "minimum-rows", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of text rows the textarea should display", "fieldName": "minRows" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "fieldName": "maxLength" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of characters for the textarea to be valid", "fieldName": "minLength" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form", "fieldName": "name" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textarea when it doesn't have a value", "fieldName": "placeholder" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native `readonly` attribute instead", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "fieldName": "readonly" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "fieldName": "required" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value", "fieldName": "value" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Show an icon behind the label indicating the field is optional", "fieldName": "optional" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-textarea", "customElement": true, "modulePath": "packages/textarea/textarea.ts", "definitionPath": "packages/textarea/textarea.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-textarea", "declaration": { "name": "WarpTextarea", "module": "packages/textarea/textarea.ts" } }, { "kind": "js", "name": "WarpTextarea", "declaration": { "name": "WarpTextarea", "module": "packages/textarea/textarea.ts" } } ] }, { "kind": "javascript-module", "path": "packages/toast/toast.ts", "declarations": [], "exports": [ { "kind": "js", "name": "removeToast", "declaration": { "name": "removeToast", "module": "./api.js" } }, { "kind": "js", "name": "toast", "declaration": { "name": "toast", "module": "./api.js" } }, { "kind": "js", "name": "updateToast", "declaration": { "name": "updateToast", "module": "./api.js" } } ] }, { "kind": "javascript-module", "path": "packages/toast-container/toast-container.ts", "declarations": [], "exports": [] } ] }

{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "packages/icon/icon.ts", "declarations": [ { "kind": "class", "description": "[Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)", "name": "WarpIcon", "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Icon filename (without .svg)", "attribute": "name", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined" }, "description": "Size: small, medium, large or pixel value (e.g. \"32px\").", "default": "\"medium\"", "attribute": "size", "reflects": true }, { "kind": "field", "name": "locale", "type": { "text": "string" }, "description": "Locale used for `` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.", "attribute": "locale", "reflects": true }, { "kind": "field", "name": "svg", "type": { "text": "SVGElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_ready", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_loadToken", "type": { "text": "symbol | null" }, "privacy": "private", "default": "null" }, { "kind": "method", "name": "loadIcon", "privacy": "private", "return": { "type": { "text": "Promise<void>" } } } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "Icon filename (without .svg)", "fieldName": "name" }, { "name": "size", "type": { "text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined" }, "description": "Size: small, medium, large or pixel value (e.g. \"32px\").", "default": "\"medium\"", "fieldName": "size" }, { "name": "locale", "type": { "text": "string" }, "description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.", "fieldName": "locale" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-icon", "customElement": true, "modulePath": "packages/icon/icon.ts", "definitionPath": "packages/icon/icon.ts" }, { "kind": "variable", "name": "WIcon", "default": "WarpIcon", "deprecated": "Exported for backwards compatibility. Use WarpIcon." } ], "exports": [ { "kind": "js", "name": "WarpIcon", "declaration": { "name": "WarpIcon", "module": "packages/icon/icon.ts" } }, { "kind": "js", "name": "WIcon", "declaration": { "name": "WIcon", "module": "packages/icon/icon.ts" } }, { "kind": "custom-element-definition", "name": "w-icon", "declaration": { "name": "WarpIcon", "module": "packages/icon/icon.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tooltip/tooltip.ts", "declarations": [ { "kind": "class", "description": "A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.\n\nTooltips should be used sparingly and contain succinct, supplementary information.", "name": "WarpTooltip", "members": [ { "kind": "field", "name": "for", "type": { "text": "string" }, "default": "\"\"", "description": "ID of the element that triggers the tooltip on hover or focus.", "attribute": "for" }, { "kind": "field", "name": "noArrow", "type": { "text": "boolean" }, "default": "false", "description": "Hide the arrow pointing toward the tooltip target.", "attribute": "no-arrow" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the tooltip is visible or not.", "attribute": "open" }, { "kind": "field", "name": "placement", "type": { "text": "TooltipPlacement" }, "default": "\"top\"", "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.", "attribute": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right'" } }, { "kind": "field", "name": "#actualPlacement", "privacy": "private", "type": { "text": "Placement" }, "default": "\"top\"" }, { "kind": "field", "name": "showDelay", "type": { "text": "number" }, "default": "150", "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.", "attribute": "show-delay", "reflects": true }, { "kind": "field", "name": "hideDelay", "type": { "text": "number" }, "default": "0", "description": "Milliseconds to wait before hiding the tooltip on mouseout.", "attribute": "hide-delay", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "Element | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "tooltip", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "hoverBridge", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "arrow", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "beak", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "#accessibleDescription", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#cleanup", "privacy": "private", "type": { "text": "ReturnType<typeof autoUpdate> | null" }, "default": "null" }, { "kind": "field", "name": "#hoverTimeout", "privacy": "private", "type": { "text": "number | undefined" } }, { "kind": "field", "name": "handleBlur", "privacy": "private" }, { "kind": "field", "name": "handleFocus", "privacy": "private" }, { "kind": "field", "name": "handleMouseOver", "privacy": "private" }, { "kind": "field", "name": "handleKeydown", "privacy": "private" }, { "kind": "field", "name": "handleMouseOut", "privacy": "private" }, { "kind": "method", "name": "#handleForChange", "privacy": "private" }, { "kind": "method", "name": "hide", "type": { "text": "hide() => void" } }, { "kind": "method", "name": "show", "type": { "text": "show() => void" } }, { "kind": "method", "name": "#handleOpenChange", "privacy": "private" }, { "kind": "method", "name": "#startPositioning", "privacy": "private" }, { "kind": "method", "name": "#stopPositioning", "privacy": "private" }, { "kind": "method", "name": "#updatePosition", "privacy": "private" }, { "kind": "method", "name": "#updateHoverBridge", "privacy": "private" } ], "attributes": [ { "name": "for", "type": { "text": "string" }, "default": "\"\"", "description": "ID of the element that triggers the tooltip on hover or focus.", "fieldName": "for" }, { "name": "no-arrow", "type": { "text": "boolean" }, "default": "false", "description": "Hide the arrow pointing toward the tooltip target.", "fieldName": "noArrow" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the tooltip is visible or not.", "fieldName": "open" }, { "name": "placement", "type": { "text": "TooltipPlacement" }, "default": "\"top\"", "description": "Sets the placement of the tooltip relative to its target.\n\nThe tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.", "fieldName": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right'" } }, { "name": "show-delay", "type": { "text": "number" }, "default": "150", "description": "Milliseconds to wait before showing the tooltip on hover.\n\nKeep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.\n\nFocusing the target element shows the tooltip immediately.", "fieldName": "showDelay" }, { "name": "hide-delay", "type": { "text": "number" }, "default": "0", "description": "Milliseconds to wait before hiding the tooltip on mouseout.", "fieldName": "hideDelay" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-tooltip", "customElement": true, "modulePath": "packages/tooltip/tooltip.ts", "definitionPath": "packages/tooltip/tooltip.ts" } ], "exports": [ { "kind": "js", "name": "WarpTooltip", "declaration": { "name": "WarpTooltip", "module": "packages/tooltip/tooltip.ts" } }, { "kind": "custom-element-definition", "name": "w-tooltip", "declaration": { "name": "WarpTooltip", "module": "packages/tooltip/tooltip.ts" } } ] }, { "kind": "javascript-module", "path": "packages/textfield/textfield.ts", "declarations": [ { "kind": "class", "description": "A single-line input component used for entering and editing textual or numeric data.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)", "name": "WarpTextField", "slots": [ { "description": "Use with `<w-affix>` to include a suffix, for example the unit for a number (e. g. km or sek).", "name": "suffix" }, { "description": "Use with `<w-affix>` to include a prefix, for example a search icon.", "name": "prefix" } ], "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.", "summary": "Mark the form field as invalid.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "string | undefined" }, "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "max", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).", "attribute": "max", "reflects": true }, { "kind": "field", "name": "min", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).", "attribute": "min", "reflects": true }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "deprecated": "Use the native `minlength` attribute", "attribute": "min-length", "reflects": true }, { "kind": "field", "name": "minlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.", "attribute": "minlength", "reflects": true }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "deprecated": "Use the native `maxlength` attribute", "attribute": "max-length", "reflects": true }, { "kind": "field", "name": "maxlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.", "attribute": "maxlength", "reflects": true }, { "kind": "field", "name": "pattern", "type": { "text": "string | undefined" }, "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)", "attribute": "pattern", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textfield when it doesn't have a value", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native readonly attribute instead.", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "string | undefined" }, "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).", "attribute": "type", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "step", "type": { "text": "number | undefined" }, "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.", "summary": "Forces `number` inputs to be a whole number of `step`", "attribute": "step", "reflects": true }, { "kind": "field", "name": "autocomplete", "type": { "text": "HTMLInputElement[\"autocomplete\"] | undefined" }, "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "formatter", "type": { "text": "((value: string) => string) | undefined" }, "description": "Function to format value when the input field.\n\nOnly active when the input field does not have focus,\nsimilar to the accessible input [masking example from Filament Group](https://filamentgroup.github.io/politespace/demo/demo.html).", "summary": "Function to format value when the input field" }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#onKeyDownHandler", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "handler", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "type": { "text": "handler(e: Event) => void" } }, { "kind": "method", "name": "prefixSlotChange", "type": { "text": "prefixSlotChange() => void" } }, { "kind": "method", "name": "suffixSlotChange", "type": { "text": "suffixSlotChange() => void" } }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid. Make sure to also set a `help-text` to help users fix the validation problem.", "summary": "Mark the form field as invalid.", "fieldName": "invalid" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "size", "type": { "text": "string | undefined" }, "description": "Sets the [size](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#size) (width) of the input field to fit the expected length of inputs.", "fieldName": "size" }, { "name": "max", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [maximum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength).", "fieldName": "max" }, { "name": "min", "type": { "text": "number | undefined" }, "description": "Use with `type=\"number\"` to set the [minimum allowed value](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength).", "fieldName": "min" }, { "name": "min-length", "type": { "text": "number | undefined" }, "deprecated": "Use the native `minlength` attribute", "fieldName": "minLength" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [minimum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) required.", "fieldName": "minlength" }, { "name": "max-length", "type": { "text": "number | undefined" }, "deprecated": "Use the native `maxlength` attribute", "fieldName": "maxLength" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "For `text`, `search`, `url`, `tel`, `email` and `password` fields, sets the [maximum string length](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) allowed.", "fieldName": "maxlength" }, { "name": "pattern", "type": { "text": "string | undefined" }, "description": "Sets a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that the input's value must [match to pass validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern)", "fieldName": "pattern" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textfield when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textfield when it doesn't have a value", "fieldName": "placeholder" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native readonly attribute instead.", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user.", "fieldName": "readonly" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission.", "fieldName": "required" }, { "name": "type", "type": { "text": "string | undefined" }, "description": "The [type of input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).", "fieldName": "type" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "fieldName": "value" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form.", "fieldName": "name" }, { "name": "step", "type": { "text": "number | undefined" }, "description": "When used with `number` this attribute forces inputs to be a whole number of `step`.\n\nFor example with a `step=\"5\"` only values that divide evenly on 5 are allowed.\nUsing arrow up and down in the input field increments and decrements by 5.", "summary": "Forces `number` inputs to be a whole number of `step`", "fieldName": "step" }, { "name": "autocomplete", "type": { "text": "HTMLInputElement[\"autocomplete\"] | undefined" }, "description": "A space-separated string that hints to browsers [what type of content it can suggest](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete#value) to autofill.", "fieldName": "autocomplete" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-textfield", "customElement": true, "modulePath": "packages/textfield/textfield.ts", "definitionPath": "packages/textfield/textfield.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-textfield", "declaration": { "name": "WarpTextField", "module": "packages/textfield/textfield.ts" } }, { "kind": "js", "name": "WarpTextField", "declaration": { "name": "WarpTextField", "module": "packages/textfield/textfield.ts" } } ] }, { "kind": "javascript-module", "path": "packages/affix/affix.ts", "declarations": [ { "kind": "class", "description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-field/frameworks/elements#prefix-label)", "name": "WarpAffix", "members": [ { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "default": "null", "summary": "Accessible label for icon-button variants.", "attribute": "aria-label", "reflects": true }, { "kind": "field", "name": "clear", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.", "summary": "Renders a clear icon button.", "attribute": "clear" }, { "kind": "field", "name": "search", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp search icon.", "summary": "Renders a search icon button.", "attribute": "search" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "\"\"", "summary": "Text label shown as prefix/suffix content.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "string | null" }, "default": "null", "summary": "Icon name rendered as prefix/suffix content.", "attribute": "icon", "reflects": true }, { "kind": "field", "name": "_icon", "readonly": true } ], "attributes": [ { "name": "aria-label", "type": { "text": "string | null" }, "default": "null", "summary": "Accessible label for icon-button variants.", "fieldName": "ariaLabel" }, { "name": "clear", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp close icon.\n\nSet an `aria-label` that explains the action when using this.", "summary": "Renders a clear icon button.", "fieldName": "clear" }, { "name": "search", "type": { "text": "boolean" }, "default": "false", "description": "Add this property to render a clickable Warp search icon.", "summary": "Renders a search icon button.", "fieldName": "search" }, { "name": "label", "type": { "text": "string" }, "default": "\"\"", "summary": "Text label shown as prefix/suffix content.", "fieldName": "label" }, { "name": "icon", "type": { "text": "string | null" }, "default": "null", "summary": "Icon name rendered as prefix/suffix content.", "fieldName": "icon" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-affix", "customElement": true, "modulePath": "packages/affix/affix.ts", "definitionPath": "packages/affix/affix.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-affix", "declaration": { "name": "WarpAffix", "module": "packages/affix/affix.ts" } }, { "kind": "js", "name": "WarpAffix", "declaration": { "name": "WarpAffix", "module": "packages/affix/affix.ts" } } ] }, { "kind": "javascript-module", "path": "packages/alert/alert.ts", "declarations": [ { "kind": "class", "description": "Alert is an inline component used for displaying different types of messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/alert/frameworks/elements)", "name": "WarpAlert", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "variant", "type": { "text": "AlertVariants" }, "default": "\"info\"", "summary": "Visual style of the alert.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'positive' | 'warning' | 'info'" } }, { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "summary": "Whether the alert is visible.", "attribute": "show", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "\"alert\"", "summary": "ARIA role announced to assistive technology.", "attribute": "role", "reflects": true } ], "attributes": [ { "name": "variant", "type": { "text": "AlertVariants" }, "default": "\"info\"", "summary": "Visual style of the alert.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'positive' | 'warning' | 'info'" } }, { "name": "show", "type": { "text": "boolean" }, "default": "false", "summary": "Whether the alert is visible.", "fieldName": "show" }, { "name": "role", "type": { "text": "string" }, "default": "\"alert\"", "summary": "ARIA role announced to assistive technology.", "fieldName": "role" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-alert", "customElement": true, "modulePath": "packages/alert/alert.ts", "definitionPath": "packages/alert/alert.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-alert", "declaration": { "name": "WarpAlert", "module": "packages/alert/alert.ts" } }, { "kind": "js", "name": "WarpAlert", "declaration": { "name": "WarpAlert", "module": "packages/alert/alert.ts" } } ] }, { "kind": "javascript-module", "path": "packages/link/link.ts", "declarations": [ { "kind": "class", "description": "Link component to use when creating links that look like buttons.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)", "name": "WarpLink", "members": [ { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focus the link after it is rendered", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style for the link/button.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined" } }, { "kind": "field", "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Render a smaller version", "attribute": "small", "reflects": true }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "The URL the link points to", "attribute": "href", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Where to display the linked URL (e.g. `_blank`)", "attribute": "target", "reflects": true }, { "kind": "field", "name": "rel", "type": { "text": "string | undefined" }, "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.", "attribute": "rel", "reflects": true }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "default": "false", "description": "Makes the link take up the full width of its parent", "attribute": "full-width", "reflects": true } ], "attributes": [ { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focus the link after it is rendered", "fieldName": "autofocus" }, { "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style for the link/button.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | undefined" } }, { "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Render a smaller version", "fieldName": "small" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "The URL the link points to", "fieldName": "href" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Applies disabled styling, but you need to disable clicks on your own.\n\nThe component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.", "fieldName": "disabled" }, { "name": "target", "type": { "text": "string | undefined" }, "description": "Where to display the linked URL (e.g. `_blank`)", "fieldName": "target" }, { "name": "rel", "type": { "text": "string | undefined" }, "description": "Relationship of the linked URL.\n\nIf `target=\"_blank\"` and `rel` is not provided, the component uses `noopener`.", "fieldName": "rel" }, { "name": "full-width", "type": { "text": "boolean" }, "default": "false", "description": "Makes the link take up the full width of its parent", "fieldName": "fullWidth" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-link", "customElement": true, "modulePath": "packages/link/link.ts", "definitionPath": "packages/link/link.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-link", "declaration": { "name": "WarpLink", "module": "packages/link/link.ts" } }, { "kind": "js", "name": "WarpLink", "declaration": { "name": "WarpLink", "module": "packages/link/link.ts" } } ] }, { "kind": "javascript-module", "path": "packages/button/button.ts", "declarations": [ { "kind": "class", "description": "Performs an action or renders a link with button styling.\n\nUse button variants to match action priority, risk, and context.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)", "name": "WarpButton", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }", "description": "Shadow root configuration.\nDelegates focus from the host to the internal control." }, { "kind": "field", "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.", "attribute": "type", "reflects": true, "parsedType": { "text": "'button' | 'submit' | 'reset' | undefined" } }, { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined" } }, { "kind": "field", "name": "quiet", "type": { "text": "boolean" }, "default": "false", "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.", "deprecated": "Use `variant=\"quiet\"` instead", "attribute": "quiet", "reflects": true }, { "kind": "field", "name": "iconOnly", "type": { "text": "boolean" }, "default": "false", "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.", "attribute": "icon-only", "reflects": true }, { "kind": "field", "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.", "attribute": "small", "reflects": true }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.", "attribute": "href", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "string | undefined" }, "description": "Link browsing context.\nPassed to the rendered link when `href` is set.", "attribute": "target", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "rel", "type": { "text": "string | undefined" }, "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.", "attribute": "rel", "reflects": true }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "default": "false", "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.", "attribute": "full-width", "reflects": true }, { "kind": "field", "name": "buttonClass", "type": { "text": "string | undefined" }, "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.", "deprecated": "This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.", "attribute": "button-class", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "Form control name.\nUsed when the button participates in form handling.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "commandfor", "type": { "text": "string | undefined" }, "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "attribute": "commandfor" }, { "kind": "field", "name": "command", "type": { "text": "string | undefined" }, "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "attribute": "command" }, { "kind": "field", "name": "buttonEl", "type": { "text": "HTMLButtonElement | null" }, "privacy": "private" }, { "kind": "field", "name": "ariaValueTextLoading", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#ariaDescription", "privacy": "private", "type": { "text": "string | undefined" }, "readonly": true }, { "kind": "method", "name": "closestWithId", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "parameters": [ { "name": "id", "type": { "text": "string" } } ], "description": "Traverse up the shadow roots looking for the ID to support use inside other Lit components." }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } } ], "attributes": [ { "name": "type", "type": { "text": "ButtonType | undefined" }, "description": "Native button type.\nControls whether the internal button behaves as a regular button, submits a form, or resets a form. Defaults to `button`.", "fieldName": "type", "parsedType": { "text": "'button' | 'submit' | 'reset' | undefined" } }, { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Focuses the button when it is first rendered.\nApplies only when the component renders a native button. Link buttons with `href` do not autofocus through this component.", "fieldName": "autofocus" }, { "name": "variant", "type": { "text": "ButtonVariant | undefined" }, "description": "Visual style of the button.\nDefaults to `secondary`. Use the variant that matches the action priority, risk, and placement.", "fieldName": "variant", "parsedType": { "text": "'negative' | 'primary' | 'secondary' | 'negativeQuiet' | 'utility' | 'quiet' | 'utilityQuiet' | 'overlay' | 'overlayInverted' | 'overlayQuiet' | 'overlayInvertedQuiet' | 'pill' | 'link' | undefined" } }, { "name": "quiet", "type": { "text": "boolean" }, "default": "false", "description": "Deprecated quiet visual treatment flag\nUse `variant=\"quiet\"` instead.", "deprecated": "Use `variant=\"quiet\"` instead", "fieldName": "quiet" }, { "name": "icon-only", "type": { "text": "boolean" }, "default": "false", "description": "Marks the button as icon-only.\nUse this when the button has no visible text. Include accessible text in the slotted content so the internal button has a name.", "fieldName": "iconOnly" }, { "name": "small", "type": { "text": "boolean" }, "default": "false", "description": "Renders the compact button size.\nUse this in dense layouts where the default button size is too large.", "fieldName": "small" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Shows the loading state.\nUse after the user has triggered an action and the action is in progress.", "fieldName": "loading" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "URL for rendering the button as a link.\nWhen set, the component renders `w-link` instead of a native `button`.", "fieldName": "href" }, { "name": "target", "type": { "text": "string | undefined" }, "description": "Link browsing context.\nPassed to the rendered link when `href` is set.", "fieldName": "target" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Visually disables the button.\nDisabled buttons are discouraged because they can hide the reason an action is unavailable.", "fieldName": "disabled" }, { "name": "rel", "type": { "text": "string | undefined" }, "description": "Link relationship.\nPassed to the rendered link when `href` is set. If `target=\"_blank\"` is set and `rel` is omitted, `noopener` is used.", "fieldName": "rel" }, { "name": "full-width", "type": { "text": "boolean" }, "default": "false", "description": "Makes the button fill its parent width.\nUseful in narrow layouts where the button should span the available inline space.", "fieldName": "fullWidth" }, { "name": "button-class", "type": { "text": "string | undefined" }, "description": "Deprecated class applied to the internal control\nThis class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the button appearance.", "deprecated": "This class is applied inside the shadow DOM and is unlikely to have the desired effect. Use attributes or CSS variables to customize the appearance of the button.", "fieldName": "buttonClass" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "Form control name.\nUsed when the button participates in form handling.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Form control value.\nUsed with `name` when the button participates in form handling. Resets to its initial value when the form is reset.", "fieldName": "value" }, { "name": "commandfor", "type": { "text": "string | undefined" }, "description": "The [commandfor HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "fieldName": "commandfor" }, { "name": "command", "type": { "text": "string | undefined" }, "description": "The [command HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#html_attributes) for Invoker Commands.", "fieldName": "command" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-button", "customElement": true, "modulePath": "packages/button/button.ts", "definitionPath": "packages/button/button.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-button", "declaration": { "name": "WarpButton", "module": "packages/button/button.ts" } }, { "kind": "js", "name": "WarpButton", "declaration": { "name": "WarpButton", "module": "packages/button/button.ts" } } ] }, { "kind": "javascript-module", "path": "packages/attention/attention.ts", "declarations": [ { "kind": "class", "description": "Note: attention will soon be split into multiple components (tooltip, callout, popover, highlight) at which time this component will be deprecated. For now, use the `tooltip`, `callout`, `popover`, and `highlight` boolean properties to achieve the desired style and behavior.\n\nAttention is a versatile component for displaying contextual information and messages. It can be used for a wide range of purposes, such as tooltips, callouts, popovers, and highlights.\n\nThe component is designed to be anchored to a trigger element, providing contextual information related to that element. It supports various placements and styling options to accommodate different use cases and design needs.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tooltip/frameworks/elements)", "name": "WarpAttention", "members": [ { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.", "attribute": "show", "reflects": true }, { "kind": "field", "name": "placement", "type": { "text": "Directions" }, "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.", "default": "\"bottom\"", "attribute": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'" } }, { "kind": "field", "name": "tooltip", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "callout", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.", "attribute": "callout", "reflects": true }, { "kind": "field", "name": "popover", "type": { "text": "boolean" }, "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.", "default": "false", "attribute": "popover", "reflects": true }, { "kind": "field", "name": "highlight", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.", "attribute": "highlight", "reflects": true }, { "kind": "field", "name": "canClose", "type": { "text": "boolean" }, "default": "false", "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.", "attribute": "can-close", "reflects": true }, { "kind": "field", "name": "noArrow", "type": { "text": "boolean" }, "default": "false", "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.", "attribute": "no-arrow", "reflects": true }, { "kind": "field", "name": "distance", "type": { "text": "number" }, "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.", "default": "8", "attribute": "distance" }, { "kind": "field", "name": "skidding", "type": { "text": "number" }, "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.", "default": "0", "attribute": "skidding" }, { "kind": "field", "name": "flip", "type": { "text": "boolean" }, "default": "false", "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.", "attribute": "flip", "reflects": true }, { "kind": "field", "name": "crossAxis", "type": { "text": "boolean" }, "default": "false", "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.", "attribute": "cross-axis", "reflects": true }, { "kind": "field", "name": "fallbackPlacements", "type": { "text": "Directions[]" }, "default": "[]", "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.", "attribute": "fallback-placements", "reflects": true }, { "kind": "method", "name": "handleDone", "type": { "text": "handleDone() => void" } }, { "kind": "method", "name": "pointingAtDirection", "type": { "text": "pointingAtDirection() => void" } }, { "kind": "method", "name": "activeAttentionType", "type": { "text": "activeAttentionType() => void" } }, { "kind": "method", "name": "defaultAriaLabel", "type": { "text": "defaultAriaLabel() => void" } }, { "kind": "method", "name": "close", "type": { "text": "close() => void" } }, { "kind": "method", "name": "keypressed", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "keypressed(e: KeyboardEvent) => void" } }, { "kind": "field", "name": "_initialPlacement" }, { "kind": "field", "name": "_actualDirection" } ], "attributes": [ { "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the attention panel is visible.\nSet to `true` to show the attention content and `false` to hide it.", "fieldName": "show" }, { "name": "placement", "type": { "text": "Directions" }, "description": "Preferred placement relative to the trigger element.\nSets the initial direction for positioning, for example `top`, `right`, `bottom`, or `left` variants.", "default": "\"bottom\"", "fieldName": "placement", "parsedType": { "text": "'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'" } }, { "name": "tooltip", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with tooltip styling and behavior.\nUse for compact, non-modal contextual hints anchored to another element.", "fieldName": "tooltip" }, { "name": "callout", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component as an inline callout.\nCallout mode is used for always-in-flow informational content instead of floating overlay behavior.", "fieldName": "callout" }, { "name": "popover", "type": { "text": "boolean" }, "description": "Enables native popover behavior for the attention element.\nWhen enabled, the component uses popover semantics and styling suitable for floating surface UI.", "default": "false", "fieldName": "popover" }, { "name": "highlight", "type": { "text": "boolean" }, "default": "false", "description": "Renders the component with highlight styling.\nUse highlight mode to visually emphasize important contextual information.", "fieldName": "highlight" }, { "name": "can-close", "type": { "text": "boolean" }, "default": "false", "description": "Shows a close button inside the attention component.\nAdds an internal dismiss action that lets users close the attention panel.", "fieldName": "canClose" }, { "name": "no-arrow", "type": { "text": "boolean" }, "default": "false", "description": "Hides the directional arrow of the attention component.\nDisable the arrow when the visual connection to the trigger should not be shown.", "fieldName": "noArrow" }, { "name": "distance", "type": { "text": "number" }, "description": "Distance offset between trigger and attention panel.\nDefines the main-axis spacing in pixels from the anchor element.", "default": "8", "fieldName": "distance" }, { "name": "skidding", "type": { "text": "number" }, "description": "Cross-axis offset for fine-grained positioning.\nMoves the panel along the cross axis in pixels to adjust alignment with the trigger.", "default": "0", "fieldName": "skidding" }, { "name": "flip", "type": { "text": "boolean" }, "default": "false", "description": "Enables automatic flipping when placement has no space.\nAllows the component to choose an alternative side if the preferred placement would overflow.", "fieldName": "flip" }, { "name": "cross-axis", "type": { "text": "boolean" }, "default": "false", "description": "Allows overflow checks on the cross axis when flipping.\nUse with `flip` to improve collision handling when space is constrained horizontally or vertically.", "fieldName": "crossAxis" }, { "name": "fallback-placements", "type": { "text": "Directions[]" }, "default": "[]", "description": "Ordered list of fallback placements.\nProvides explicit alternative placements to try when `flip` is enabled and the preferred placement does not fit.", "fieldName": "fallbackPlacements" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-attention", "customElement": true, "modulePath": "packages/attention/attention.ts", "definitionPath": "packages/attention/attention.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-attention", "declaration": { "name": "WarpAttention", "module": "packages/attention/attention.ts" } }, { "kind": "js", "name": "WarpAttention", "declaration": { "name": "WarpAttention", "module": "packages/attention/attention.ts" } } ] }, { "kind": "javascript-module", "path": "packages/badge/badge.ts", "declarations": [ { "kind": "class", "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.", "name": "WarpBadge", "slots": [ { "description": "The content of the badge, which is typically a short string like \"New\" or \"4\".", "name": "" } ], "members": [ { "kind": "field", "name": "variant", "type": { "text": "| \"neutral\"\n\t\t| \"info\"\n\t\t| \"positive\"\n\t\t| \"warning\"\n\t\t| \"negative\"\n\t\t| \"disabled\"\n\t\t| \"price\"\n\t\t| \"sponsored\"\n\t\t| undefined" }, "default": "\"neutral\"", "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.", "attribute": "variant", "reflects": true, "parsedType": { "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined" } }, { "kind": "field", "name": "position", "type": { "text": "\"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\" | undefined" }, "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.", "attribute": "position", "reflects": true } ], "attributes": [ { "name": "variant", "type": { "text": "| \"neutral\"\n\t\t| \"info\"\n\t\t| \"positive\"\n\t\t| \"warning\"\n\t\t| \"negative\"\n\t\t| \"disabled\"\n\t\t| \"price\"\n\t\t| \"sponsored\"\n\t\t| undefined" }, "default": "\"neutral\"", "description": "Controls the badge color treatment.\nIf omitted, the badge uses neutral styling without reflecting a `variant` attribute.\nAccepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.", "fieldName": "variant", "parsedType": { "text": "'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined" } }, { "name": "position", "type": { "text": "\"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\" | undefined" }, "description": "Positions the badge in a corner of a parent element.\nUse this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.\nUse this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.", "fieldName": "position" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-badge", "customElement": true, "modulePath": "packages/badge/badge.ts", "definitionPath": "packages/badge/badge.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-badge", "declaration": { "name": "WarpBadge", "module": "packages/badge/badge.ts" } }, { "kind": "js", "name": "WarpBadge", "declaration": { "name": "WarpBadge", "module": "packages/badge/badge.ts" } } ] }, { "kind": "javascript-module", "path": "packages/box/box.ts", "declarations": [ { "kind": "class", "description": "Box is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/box/frameworks/elements)", "name": "WarpBox", "members": [ { "kind": "field", "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.", "attribute": "bleed", "reflects": true }, { "kind": "field", "name": "bordered", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.", "attribute": "bordered", "reflects": true }, { "kind": "field", "name": "info", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.", "attribute": "info", "reflects": true }, { "kind": "field", "name": "neutral", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.", "attribute": "neutral", "reflects": true }, { "kind": "field", "name": "role", "type": { "text": "string" }, "default": "\"region\"", "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.", "attribute": "role", "reflects": true } ], "attributes": [ { "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Makes the box bleed to the container edge.\nExtends the box into the horizontal gutter on narrow screens. Adds negative horizontal margins and square side corners below the small breakpoint, then restores the normal margins and rounded corners from the small breakpoint and up.", "fieldName": "bleed" }, { "name": "bordered", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box as a bordered surface.\nUse this when the content needs a clear visual boundary from the surrounding page.", "fieldName": "bordered" }, { "name": "info", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with information styling.\nUse this for supporting informational content that should be visually separated from the surrounding page.", "fieldName": "info" }, { "name": "neutral", "type": { "text": "boolean" }, "default": "false", "description": "Shows the box with neutral styling.\nUse this for quiet grouped content that needs a background without strong emphasis.", "fieldName": "neutral" }, { "name": "role", "type": { "text": "string" }, "default": "\"region\"", "description": "ARIA role for the box wrapper.\nDefaults to a role of `region`. Set `role=\"none\"` to override this behaviour for purely visual grouping, or set a specific role when the box has a clearer semantic purpose.", "fieldName": "role" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-box", "customElement": true, "modulePath": "packages/box/box.ts", "definitionPath": "packages/box/box.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-box", "declaration": { "name": "WarpBox", "module": "packages/box/box.ts" } }, { "kind": "js", "name": "WarpBox", "declaration": { "name": "WarpBox", "module": "packages/box/box.ts" } } ] }, { "kind": "javascript-module", "path": "packages/breadcrumb-item/breadcrumb-item.ts", "declarations": [ { "kind": "class", "description": "Represents one item in a `w-breadcrumbs` trail.\nRenders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)", "name": "WarpBreadcrumbItem", "slots": [ { "description": "The breadcrumb label content.", "name": "" } ], "members": [ { "kind": "field", "name": "currentPage", "type": { "text": "boolean" }, "default": "false", "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.", "attribute": "current-page" }, { "kind": "field", "name": "href", "type": { "text": "string | null" }, "default": "null", "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.", "attribute": "href" } ], "attributes": [ { "name": "current-page", "type": { "text": "boolean" }, "default": "false", "description": "Marks this item as the current page.\nUse this on the final breadcrumb item so it exposes `aria-current=\"page\"` and does not render a trailing separator.", "fieldName": "currentPage" }, { "name": "href", "type": { "text": "string | null" }, "default": "null", "description": "URL for linked breadcrumb items.\nWhen omitted, the item renders as non-focusable text.", "fieldName": "href" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-breadcrumbs", "description": "" }, "tagName": "w-breadcrumb-item", "customElement": true, "modulePath": "packages/breadcrumb-item/breadcrumb-item.ts", "definitionPath": "packages/breadcrumb-item/breadcrumb-item.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-breadcrumb-item", "declaration": { "name": "WarpBreadcrumbItem", "module": "packages/breadcrumb-item/breadcrumb-item.ts" } }, { "kind": "js", "name": "WarpBreadcrumbItem", "declaration": { "name": "WarpBreadcrumbItem", "module": "packages/breadcrumb-item/breadcrumb-item.ts" } } ] }, { "kind": "javascript-module", "path": "packages/breadcrumbs/breadcrumbs.ts", "declarations": [ { "kind": "class", "description": "Shows the navigation structure for the current page.\n\nRenders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/breadcrumbs/frameworks/elements)", "name": "WarpBreadcrumbs", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "_defaultLabel", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "description": "Accessible label for the breadcrumb navigation.\nDefaults to the localized \"You are here\" label. Set `aria-label` when the default label is not specific enough for the page." }, { "kind": "field", "name": "_label", "type": { "text": "string" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "_children", "type": { "text": "Array<Element | TemplateResult>" }, "privacy": "private", "default": "[]" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-breadcrumbs", "customElement": true, "modulePath": "packages/breadcrumbs/breadcrumbs.ts", "definitionPath": "packages/breadcrumbs/breadcrumbs.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-breadcrumbs", "declaration": { "name": "WarpBreadcrumbs", "module": "packages/breadcrumbs/breadcrumbs.ts" } }, { "kind": "js", "name": "WarpBreadcrumbs", "declaration": { "name": "WarpBreadcrumbs", "module": "packages/breadcrumbs/breadcrumbs.ts" } } ] }, { "kind": "javascript-module", "path": "packages/card/card.ts", "declarations": [ { "kind": "class", "description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)", "name": "WarpCard", "members": [ { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card is visually selected.\n\nUse this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.", "attribute": "selected", "reflects": true }, { "kind": "field", "name": "flat", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.", "attribute": "flat" }, { "kind": "field", "name": "clickable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.", "deprecated": "This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead.", "attribute": "clickable" }, { "kind": "field", "name": "buttonText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "method", "name": "keypressed", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "keypressed(e: KeyboardEvent) => void" } } ], "attributes": [ { "name": "selected", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card is visually selected.\n\nUse this when the card represents a selected item or choice. This only controls the visual selected state; update it from your application state when the selection changes.", "fieldName": "selected" }, { "name": "flat", "type": { "text": "boolean" }, "default": "false", "description": "Whether the card uses the flat visual treatment.\n\nFlat cards use a bordered surface instead of the default elevated surface. Use this for denser layouts or when the card sits inside another surface.", "fieldName": "flat" }, { "name": "clickable", "type": { "text": "boolean" }, "default": "false", "description": "Whether the whole card is interactive.\n\nWhen set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.", "deprecated": "This will be removed in a future version. Use data-card-action attribute on a link or button inside the card instead.", "fieldName": "clickable" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-card", "customElement": true, "modulePath": "packages/card/card.ts", "definitionPath": "packages/card/card.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-card", "declaration": { "name": "WarpCard", "module": "packages/card/card.ts" } }, { "kind": "js", "name": "WarpCard", "declaration": { "name": "WarpCard", "module": "packages/card/card.ts" } } ] }, { "kind": "javascript-module", "path": "packages/checkbox/checkbox.ts", "declarations": [ { "kind": "class", "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)", "name": "WarpCheckbox", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "name", "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.", "type": { "text": "string | undefined" }, "attribute": "name", "reflects": true }, { "kind": "field", "name": "_ownName", "type": { "text": "string | undefined" }, "privacy": "private" }, { "kind": "field", "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.", "attribute": "indeterminate", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "_groupInvalid", "type": { "text": "boolean | undefined" }, "privacy": "private", "description": "Internal invalid state managed by parent checkbox-group.\nNon-reflecting to avoid DOM changes during hydration." }, { "kind": "field", "name": "_groupName", "type": { "text": "string | undefined" }, "privacy": "private", "description": "Internal name managed by parent checkbox-group.\nNon-reflecting to avoid DOM changes during hydration." }, { "kind": "field", "name": "#defaultChecked", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Used for resetting." }, { "kind": "field", "name": "#invalidFromRequired", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "_computedInvalid", "type": { "text": "boolean" }, "description": "Computed invalid state: combines own invalid with group invalid", "readonly": true }, { "kind": "method", "name": "handleClick", "privacy": "private" }, { "kind": "field", "name": "#handleInvalid", "privacy": "private" }, { "kind": "field", "name": "#handleKeyDown", "privacy": "private" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "click", "type": { "text": "click() => void" } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "type": { "text": "focus(options?: FocusOptions) => void" } }, { "kind": "method", "name": "blur", "type": { "text": "blur() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the checkbox is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the checkbox", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the checkbox passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the browser's validation message if invalid", "type": { "text": "reportValidity() => boolean" } } ], "attributes": [ { "name": "name", "description": "The name of the checkbox.\n\nWhen the checkbox is checked and belongs to a form, this name is submitted with the checkbox value. If the checkbox is inside a `w-checkbox-group` with a name, the group name is used when the checkbox does not have its own name.", "type": { "text": "string | undefined" }, "fieldName": "name" }, { "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The value submitted when the checkbox is checked.\n\nIf no value attribute is set, the checkbox defaults to `on`. Unchecked and disabled checkboxes do not submit a value.", "fieldName": "value" }, { "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually indeterminate.\n\nUse this for parent options that represent a mixed set of child selections. Clicking the checkbox clears the indeterminate state and sets the checkbox to checked.", "fieldName": "indeterminate" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is checked.\n\nChecked checkboxes submit their value with form data. The property is reflected to the `checked` attribute.", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is disabled.\n\nDisabled checkboxes cannot be focused, changed, or submitted with form data.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox must be checked before form submission.\n\nA required checkbox is invalid until it is checked. For requiring at least one option in a set, use `required` on `w-checkbox-group`.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox is visually invalid.\n\nUse this to show an externally managed validation error. Required validation also sets the invalid state after the user interacts with the checkbox or tries to submit the form.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-checkbox-group", "description": "" }, "tagName": "w-checkbox", "customElement": true, "modulePath": "packages/checkbox/checkbox.ts", "definitionPath": "packages/checkbox/checkbox.ts" }, { "kind": "variable", "name": "WCheckbox", "default": "WarpCheckbox", "deprecated": "Use WarpCheckbox" } ], "exports": [ { "kind": "js", "name": "WarpCheckbox", "declaration": { "name": "WarpCheckbox", "module": "packages/checkbox/checkbox.ts" } }, { "kind": "js", "name": "WCheckbox", "declaration": { "name": "WCheckbox", "module": "packages/checkbox/checkbox.ts" } }, { "kind": "custom-element-definition", "name": "w-checkbox", "declaration": { "name": "WarpCheckbox", "module": "packages/checkbox/checkbox.ts" } } ] }, { "kind": "javascript-module", "path": "packages/checkbox-group/checkbox-group.ts", "declarations": [ { "kind": "class", "description": "Checkboxes allow users to select one or more options from a number of choices.\n\nWrap individual checkboxes in a checkbox group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/checkbox/frameworks/elements)", "name": "WarpCheckboxGroup", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasWarnedMissingName", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "_internalTabIndex", "type": { "text": "number" }, "privacy": "private", "default": "-1" }, { "kind": "field", "name": "#unsubscribeI18n", "privacy": "private", "type": { "text": "() => void | undefined" } }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the group passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the checkbox group.", "type": { "text": "focus(options?: FocusOptions) => void" } }, { "kind": "field", "name": "#handleChange", "privacy": "private" }, { "kind": "field", "name": "#handleInvalid", "privacy": "private" }, { "kind": "field", "name": "#handleSlotChange", "privacy": "private" }, { "kind": "method", "name": "#markInteracted", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "#handleI18nChange", "privacy": "private" }, { "kind": "method", "name": "#getCheckedCount", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "#applyGroupName", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#syncChildInvalid", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "isInvalid", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#getValidationAnchor", "privacy": "private", "return": { "type": { "text": "HTMLElement | undefined" } } }, { "kind": "method", "name": "#getAssignedElements", "privacy": "private", "return": { "type": { "text": "Element[]" } } }, { "kind": "method", "name": "#getRequiredMessage", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "#shouldUpdateValidity", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "changedProperties", "type": { "text": "PropertyValues<this>" } } ] }, { "kind": "method", "name": "#setValidityState", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "state", "type": { "text": "ValidityStateFlags" } } ] }, { "kind": "method", "name": "#syncInternalTabIndex", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "shouldBeFocusable", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#updateValidity", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#warnIfMissingName", "privacy": "private", "return": { "type": { "text": "void" } } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The group label displayed above the checkboxes.\n\nUse this to describe the shared question or topic for the checkbox options. The label is connected to the internal group for assistive technologies.", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name applied to child checkboxes when they do not provide one.\n\nUse this when the grouped checkboxes should submit values under the same form field name. Individual checkboxes can still override the group name with their own `name`.", "fieldName": "name" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that selecting an option from the group is not required.", "fieldName": "optional" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Help text displayed below the checkbox group.\n\nUse this for supporting guidance or validation feedback. When required validation fails, the group replaces this text with the localized required message.", "fieldName": "helpText" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether at least one checkbox in the group must be selected.\n\nRequired validation is managed by the group. The individual checkboxes provide the submitted form values.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the checkbox group is visually invalid.\n\nUse this to show an externally managed validation error for the group. The invalid state is also shared with child checkboxes for consistent styling and accessibility state.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-checkbox-group", "customElement": true, "modulePath": "packages/checkbox-group/checkbox-group.ts", "definitionPath": "packages/checkbox-group/checkbox-group.ts" }, { "kind": "variable", "name": "WCheckboxGroup", "default": "WarpCheckboxGroup", "deprecated": "Use WarpCheckboxGroup" } ], "exports": [ { "kind": "js", "name": "WarpCheckboxGroup", "declaration": { "name": "WarpCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } }, { "kind": "js", "name": "WCheckboxGroup", "declaration": { "name": "WCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } }, { "kind": "custom-element-definition", "name": "w-checkbox-group", "declaration": { "name": "WarpCheckboxGroup", "module": "packages/checkbox-group/checkbox-group.ts" } } ] }, { "kind": "javascript-module", "path": "packages/combobox/combobox.ts", "declarations": [ { "kind": "class", "description": "A combobox element for text input with selectable options.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/combo-box/frameworks/elements)", "name": "WarpCombobox", "members": [ { "kind": "field", "name": "options", "type": { "text": "ComboboxOption[]" }, "default": "[]", "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.", "attribute": "options" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "openOnFocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.", "attribute": "open-on-focus", "reflects": true }, { "kind": "field", "name": "selectOnBlur", "type": { "text": "boolean" }, "default": "true", "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.", "attribute": "select-on-blur", "reflects": true }, { "kind": "field", "name": "matchTextSegments", "type": { "text": "boolean" }, "default": "false", "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.", "attribute": "match-text-segments", "reflects": true }, { "kind": "field", "name": "disableStaticFiltering", "type": { "text": "boolean" }, "default": "false", "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.", "attribute": "disable-static-filtering", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "autocomplete", "type": { "text": "string | undefined" }, "default": "\"off\"", "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "#lightDomObserver", "privacy": "private", "type": { "text": "MutationObserver | undefined" } }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "_listboxId", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_id", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_helpId", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_sourceOptions", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_navigationLabelOrDisplayValue", "privacy": "private", "description": "Get the display text for the navigation option or current display value", "readonly": true }, { "kind": "field", "name": "_navigationValueOrInputValue", "privacy": "private", "description": "Get the actual value for the navigation option or current value", "readonly": true }, { "kind": "method", "name": "_createOptionsWithIdAndMatch", "privacy": "private", "return": { "type": { "text": "OptionWithIdAndMatch[]" } }, "parameters": [ { "name": "options", "type": { "text": "ComboboxOption[]" } }, { "name": "currentInputValue", "type": { "text": "string" } } ], "description": "Generate options with unique IDs and match information" }, { "kind": "method", "name": "#getOptionNodes", "privacy": "private" }, { "kind": "method", "name": "#syncOptionsFromLightDom", "privacy": "private" }, { "kind": "method", "name": "_getAriaText", "privacy": "private", "parameters": [ { "name": "options", "type": { "text": "OptionWithIdAndMatch[]" } }, { "name": "value", "type": { "text": "string" } }, { "name": "isOpen", "type": { "text": "boolean" } } ], "description": "Get ARIA text for screen readers" }, { "kind": "method", "name": "_getOptionClasses", "privacy": "private", "parameters": [ { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Get option classes" }, { "kind": "method", "name": "_handleKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "description": "Handle keyboard navigation" }, { "kind": "method", "name": "_findAndSetActiveOption", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ], "description": "Find and set active option based on keyboard navigation" }, { "kind": "method", "name": "_handleSelect", "privacy": "private", "parameters": [ { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Handle option selection" }, { "kind": "method", "name": "_handleChange", "privacy": "private", "parameters": [ { "name": "newValue", "type": { "text": "string" } } ], "description": "Handle input change" }, { "kind": "method", "name": "_handleFocus", "privacy": "private", "description": "Handle input focus" }, { "kind": "method", "name": "_handleBlur", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Handle input blur" }, { "kind": "method", "name": "_handleOptionClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "MouseEvent" } }, { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Handle option click" }, { "kind": "method", "name": "_handleContainerBlur", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Handle container blur" }, { "kind": "method", "name": "_renderTextMatch", "privacy": "private", "parameters": [ { "name": "display", "type": { "text": "string" } }, { "name": "option", "type": { "text": "OptionWithIdAndMatch" } } ], "description": "Render highlighted text match" } ], "attributes": [ { "name": "options", "type": { "text": "ComboboxOption[]" }, "default": "[]", "description": "The available options to select from.\n\nUse this for framework usage, application state, or remote search results. When `options` contains entries, it is used instead of child `<option>` elements.", "fieldName": "options" }, { "name": "label", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The label displayed above the input.\n\nUse this to give the combobox a visible and accessible name.", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Placeholder text displayed when the input is empty.\n\nUse this as a short hint for the expected input. Do not use placeholder text as a replacement for a label.", "fieldName": "placeholder" }, { "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The selected or typed value.\n\nWhen an option is selected, this is set to the option value. The displayed text may differ when the option has a separate label.", "fieldName": "value" }, { "name": "open-on-focus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the option list opens when the input receives focus.\n\nUse this when users should see available options before they start typing.", "fieldName": "openOnFocus" }, { "name": "select-on-blur", "type": { "text": "boolean" }, "default": "true", "description": "Whether the active option is selected when the input loses focus.\n\nWhen enabled, the combobox selects the keyboard-highlighted option, or an option whose value exactly matches the current input value, on blur.", "fieldName": "selectOnBlur" }, { "name": "match-text-segments", "type": { "text": "boolean" }, "default": "false", "description": "Whether matching text segments in options are highlighted.\n\nUse this to visually emphasize the part of each option that matches the current input value.", "fieldName": "matchTextSegments" }, { "name": "disable-static-filtering", "type": { "text": "boolean" }, "default": "false", "description": "Whether built-in client-side filtering is disabled.\n\nUse this for remote search or externally filtered results. When disabled, all entries in `options` are rendered as provided.", "fieldName": "disableStaticFiltering" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is visually invalid.\n\nUse this to show an externally managed validation error. Pair it with `help-text` to explain how to fix the error.", "fieldName": "invalid" }, { "name": "help-text", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "Help text displayed below the input.\n\nUse this for supporting guidance or validation feedback.", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is disabled.\n\nDisabled comboboxes cannot be focused, changed, or submitted with form data.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether the combobox is required before form submission.\n\nUse this when the user must provide a value before submitting the form.", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.\n\nUse this to indicate that the combobox is not required.", "fieldName": "optional" }, { "name": "name", "type": { "text": "string | undefined" }, "default": "\"\"", "description": "The name submitted with the combobox value.\n\nUse this when the combobox belongs to a form and its value should be included in form data.", "fieldName": "name" }, { "name": "autocomplete", "type": { "text": "string | undefined" }, "default": "\"off\"", "description": "The autocomplete attribute passed to the internal input.\n\nDefaults to `off`. Set this when browser autocomplete should be enabled or scoped to a specific autocomplete token.", "fieldName": "autocomplete" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-combobox", "customElement": true, "modulePath": "packages/combobox/combobox.ts", "definitionPath": "packages/combobox/combobox.ts" } ], "exports": [ { "kind": "js", "name": "WarpCombobox", "declaration": { "name": "WarpCombobox", "module": "packages/combobox/combobox.ts" } }, { "kind": "custom-element-definition", "name": "w-combobox", "declaration": { "name": "WarpCombobox", "module": "packages/combobox/combobox.ts" } } ] }, { "kind": "javascript-module", "path": "packages/datepicker/datepicker.ts", "declarations": [ { "kind": "class", "description": "A date picker allows the user to select a specific calendar date.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/date-picker/frameworks/elements)", "name": "WarpDatepicker", "members": [ { "kind": "field", "name": "shadowRootOptions", "type": { "text": "object" }, "static": true, "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }" }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Indicate visually that the field is optional", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "lang", "type": { "text": "string" }, "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.", "attribute": "lang", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "headerFormat", "type": { "text": "string" }, "default": "\"MMMM yyyy\"", "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "header-format" }, { "kind": "field", "name": "weekdayFormat", "type": { "text": "string" }, "default": "\"EEEEEE\"", "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "weekday-format" }, { "kind": "field", "name": "isDayDisabled", "type": { "text": "((day: Date) => boolean) | undefined" }, "description": "Function used to disable dates in the calendar.\n\nSet this on the element instance in JavaScript, not as an HTML attribute. Disabled dates cannot be selected from the calendar." }, { "kind": "field", "name": "dayFormat", "type": { "text": "string" }, "default": "\"PPPP\"", "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "attribute": "day-format" }, { "kind": "field", "name": "isCalendarOpen", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "navigationDate", "type": { "text": "Date" } }, { "kind": "field", "name": "selectedDate", "type": { "text": "Date | null" }, "readonly": true }, { "kind": "field", "name": "month", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "weeks", "readonly": true }, { "kind": "field", "name": "calendar", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "toggleButton", "type": { "text": "HTMLButtonElement" } }, { "kind": "field", "name": "wrapper", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "previousMonthButton", "type": { "text": "HTMLButtonElement" }, "description": "This is the first focusable element, needed for the modal focus trap.\n\nDon't cache this and other `@query` fields from inside the calendar modal.\nThey work the first time, but once the calendar is closed and reopened\nthe query will point to an element that doesn't exist anymore." }, { "kind": "field", "name": "todayCell", "type": { "text": "HTMLTableCellElement" } }, { "kind": "field", "name": "selectedCell", "type": { "text": "HTMLTableCellElement" } }, { "kind": "field", "name": "#inputLocale", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#inputValue", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#toggleCalendarOpen", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "MouseEvent | KeyboardEvent" } } ] }, { "kind": "method", "name": "#nextMonth", "privacy": "private" }, { "kind": "method", "name": "#previousMonth", "privacy": "private" }, { "kind": "field", "name": "#customValidationMessage", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "method", "name": "#dispatchChangeEvent", "privacy": "private" }, { "kind": "method", "name": "#onInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ] }, { "kind": "method", "name": "#onInputBlur", "privacy": "private" }, { "kind": "method", "name": "#onInputClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "PointerEvent" } } ] }, { "kind": "method", "name": "#onInputKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onCalendarKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onCalendarSelect", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent | KeyboardEvent" } } ] }, { "kind": "field", "name": "#validationActive", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#originalHelpText", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the textarea is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the textarea", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the textarea passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the browser's validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to clear.", "type": { "text": "setCustomValidity(message: string) => void" } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The label displayed above the date input.\n\nUse this to give the datepicker a visible and accessible name.", "fieldName": "label" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Indicate visually that the field is optional", "fieldName": "optional" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "fieldName": "invalid" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "lang", "type": { "text": "string" }, "description": "The locale used for calendar labels and date formatting.\n\nThis takes precedence over the `<html>` `lang` attribute. Supported built-in locales are `en`, `nb`, `sv`, `da`, and `fi`.", "fieldName": "lang" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name submitted with the date value.\n\nUse this when the datepicker belongs to a form and its value should be included in form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "The selected date value.\n\nUse an ISO date string in `YYYY-MM-DD` format. The value is submitted with the form and is reset to its initial value when the form resets.", "fieldName": "value" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "fieldName": "readonly" }, { "name": "header-format", "type": { "text": "string" }, "default": "\"MMMM yyyy\"", "description": "The date format used in the calendar header.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "headerFormat" }, { "name": "weekday-format", "type": { "text": "string" }, "default": "\"EEEEEE\"", "description": "The weekday format shown above the calendar grid.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "weekdayFormat" }, { "name": "day-format", "type": { "text": "string" }, "default": "\"PPPP\"", "description": "The date format used for calendar day accessible names.\n\nThe syntax is defined by [date-fns/format](https://date-fns.org/v4.1.0/docs/format).", "fieldName": "dayFormat" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-datepicker", "customElement": true, "modulePath": "packages/datepicker/datepicker.ts", "definitionPath": "packages/datepicker/datepicker.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-datepicker", "declaration": { "name": "WarpDatepicker", "module": "packages/datepicker/datepicker.ts" } }, { "kind": "js", "name": "WarpDatepicker", "declaration": { "name": "WarpDatepicker", "module": "packages/datepicker/datepicker.ts" } } ] }, { "kind": "javascript-module", "path": "packages/expandable/expandable.ts", "declarations": [ { "kind": "class", "description": "Expandable is a layout component used for creating expandable content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)", "name": "WarpExpandable", "cssParts": [ { "description": "the root wrapper element inside the component.", "name": "base" }, { "description": "the chevron container.", "name": "chevron" } ], "slots": [ { "description": "Alternative to the `title` attribute should you need to provide some additional markup.", "name": "title" } ], "members": [ { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Controls component's expanded state", "attribute": "expanded", "reflects": true }, { "kind": "field", "name": "title", "type": { "text": "string" }, "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.", "attribute": "title" }, { "kind": "field", "name": "box", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable a Box", "attribute": "box", "reflects": true }, { "kind": "field", "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable full-width on the sm breakpoint size", "attribute": "bleed", "reflects": true }, { "kind": "field", "name": "buttonClass", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "attribute": "button-class" }, { "kind": "field", "name": "contentClass", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "attribute": "content-class" }, { "kind": "field", "name": "noChevron", "type": { "text": "boolean" }, "default": "false", "description": "Controls chevron visibility", "attribute": "no-chevron" }, { "kind": "field", "name": "animated", "type": { "text": "boolean" }, "default": "false", "description": "Will animate the expansion/collapse", "attribute": "animated" }, { "kind": "field", "name": "headingLevel", "type": { "text": "number | undefined" }, "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.", "attribute": "heading-level" }, { "kind": "field", "name": "_hasTitle", "type": { "text": "boolean" }, "privacy": "private", "default": "true", "attribute": "_hasTitle" }, { "kind": "field", "name": "_showChevronUp", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "attribute": "_showChevronUp" }, { "kind": "field", "name": "#chevronIcon", "privacy": "private", "readonly": true } ], "attributes": [ { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Controls component's expanded state", "fieldName": "expanded" }, { "name": "title", "type": { "text": "string" }, "description": "Component title. Used to display the title value which is always present regardless of whether the component is open or closed.", "fieldName": "title" }, { "name": "box", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable a Box", "fieldName": "box" }, { "name": "bleed", "type": { "text": "boolean" }, "default": "false", "description": "Will make the expandable full-width on the sm breakpoint size", "fieldName": "bleed" }, { "name": "button-class", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "fieldName": "buttonClass" }, { "name": "content-class", "type": { "text": "string | undefined" }, "deprecated": "Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.", "fieldName": "contentClass" }, { "name": "no-chevron", "type": { "text": "boolean" }, "default": "false", "description": "Controls chevron visibility", "fieldName": "noChevron" }, { "name": "animated", "type": { "text": "boolean" }, "default": "false", "description": "Will animate the expansion/collapse", "fieldName": "animated" }, { "name": "heading-level", "type": { "text": "number | undefined" }, "description": "Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.", "fieldName": "headingLevel" }, { "name": "_hasTitle", "type": { "text": "boolean" }, "default": "true", "fieldName": "_hasTitle" }, { "name": "_showChevronUp", "type": { "text": "boolean" }, "default": "false", "fieldName": "_showChevronUp" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-expandable", "customElement": true, "modulePath": "packages/expandable/expandable.ts", "definitionPath": "packages/expandable/expandable.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-expandable", "declaration": { "name": "WarpExpandable", "module": "packages/expandable/expandable.ts" } }, { "kind": "js", "name": "WarpExpandable", "declaration": { "name": "WarpExpandable", "module": "packages/expandable/expandable.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal/modal.ts", "declarations": [ { "kind": "class", "description": "Modals (or dialogs) display important information that users need to acknowledge.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModal", "cssProperties": [ { "name": "--w-c-modal-backdrop-color" }, { "name": "--w-c-modal-bg" }, { "name": "--w-c-modal-box-shadow" }, { "name": "--w-c-modal-color" }, { "name": "--w-c-modal-height" }, { "name": "--w-c-modal-max-height" }, { "name": "--w-c-modal-min-height" }, { "name": "--w-c-modal-translate-distance" }, { "name": "--w-c-modal-padding-bottom" }, { "name": "--w-c-modal-width" } ], "cssParts": [ { "description": "the root element inside the component (`<dialog>` element).", "name": "dialog" }, { "description": "container for all elements, direct child of `<dialog>`.", "name": "wrapper" }, { "description": "the container for the `content` slot items (children).", "name": "content" } ], "slots": [ { "description": "Typically where you would use the `w-modal-header` component.", "name": "header" }, { "description": "The main content of the modal.", "name": "content" }, { "description": "Typically where you would use the `w-modal-footer` component, for things like actions.", "name": "footer" } ], "members": [ { "kind": "field", "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.", "attribute": "show" }, { "kind": "field", "name": "contentId", "type": { "text": "string | undefined" }, "deprecated": "This ID has no effect", "attribute": "content-id" }, { "kind": "field", "name": "ignoreBackdropClicks", "type": { "text": "boolean" }, "default": "false", "description": "Ignores clicks to the backdrop when set", "attribute": "ignore-backdrop-clicks" }, { "kind": "field", "name": "dialogEl", "type": { "text": "HTMLDialogElement" }, "privacy": "private" }, { "kind": "field", "name": "dialogInnerEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "contentEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "_isClosing", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "method", "name": "open", "type": { "text": "open() => void" } }, { "kind": "method", "name": "close", "type": { "text": "close() => void" } }, { "kind": "method", "name": "handleListeners", "privacy": "private", "parameters": [ { "name": "verb", "default": "\"addEventListener\"" } ] }, { "kind": "method", "name": "eventPreventer", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "closeOnBackdropClick", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "interceptEscape", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "modifyBorderRadius", "privacy": "private" } ], "events": [ { "name": "shown", "type": { "text": "CustomEvent" } }, { "name": "hidden", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "show", "type": { "text": "boolean" }, "default": "false", "description": "Controls if the modal should show or hide.\n\nYou can also call the `open()` and `close()` methods.", "fieldName": "show" }, { "name": "content-id", "type": { "text": "string | undefined" }, "deprecated": "This ID has no effect", "fieldName": "contentId" }, { "name": "ignore-backdrop-clicks", "type": { "text": "boolean" }, "default": "false", "description": "Ignores clicks to the backdrop when set", "fieldName": "ignoreBackdropClicks" } ], "mixins": [ { "name": "ProvidesCanCloseToSlotsMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-modal", "customElement": true, "modulePath": "packages/modal/modal.ts", "definitionPath": "packages/modal/modal.ts" }, { "kind": "variable", "name": "ModalMain", "default": "WarpModal", "deprecated": "Exported for backwards compatibility. Use WarpModal." } ], "exports": [ { "kind": "js", "name": "WarpModal", "declaration": { "name": "WarpModal", "module": "packages/modal/modal.ts" } }, { "kind": "js", "name": "ModalMain", "declaration": { "name": "ModalMain", "module": "packages/modal/modal.ts" } }, { "kind": "custom-element-definition", "name": "w-modal", "declaration": { "name": "WarpModal", "module": "packages/modal/modal.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal-footer/modal-footer.ts", "declarations": [ { "kind": "class", "description": "The footer section of a modal, typically where you place actions.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModalFooter", "cssProperties": [ { "description": " adjusts the flex gap between actions in the footer.", "name": "--w-c-modal-footer-gap" } ], "cssParts": [ { "description": "the container for slotted items (children).", "name": "footer" } ], "members": [], "mixins": [ { "name": "CanCloseMixin", "module": "/packages/modal/util.js" }, { "name": "ProvidesCanCloseToSlotsMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-modal", "description": "" }, "tagName": "w-modal-footer", "customElement": true, "modulePath": "packages/modal-footer/modal-footer.ts", "definitionPath": "packages/modal-footer/modal-footer.ts" }, { "kind": "variable", "name": "ModalFooter", "default": "WarpModalFooter", "deprecated": "Exported for backwards compatibility. Use WarpModalFooter." } ], "exports": [ { "kind": "js", "name": "WarpModalFooter", "declaration": { "name": "WarpModalFooter", "module": "packages/modal-footer/modal-footer.ts" } }, { "kind": "js", "name": "ModalFooter", "declaration": { "name": "ModalFooter", "module": "packages/modal-footer/modal-footer.ts" } }, { "kind": "custom-element-definition", "name": "w-modal-footer", "declaration": { "name": "WarpModalFooter", "module": "packages/modal-footer/modal-footer.ts" } } ] }, { "kind": "javascript-module", "path": "packages/modal-header/modal-header.ts", "declarations": [ { "kind": "class", "description": "The header section of a modal, typically where you place the title and a close button.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/modal/frameworks/elements)", "name": "WarpModalHeader", "cssProperties": [ { "name": "--w-c-modal-header-font-size" }, { "name": "--w-c-modal-header-line-height" }, { "name": "--w-c-modal-header-margin-bottom" } ], "cssParts": [ { "description": "the root element inside the component.", "name": "header" }, { "description": "the container for the image (`top` slot).", "name": "top" }, { "description": "the back button, if visible.", "name": "back" }, { "description": "the title element.", "name": "title" }, { "description": "the close button, if visible.", "name": "close" } ], "slots": [ { "description": "Customize the title bar, for example to have a header image that reaches the modal's edges. See the With Image story for an example.", "name": "top" } ], "members": [ { "kind": "field", "name": "title", "type": { "text": "string" }, "description": "A short but descriptive title for the modal", "attribute": "title" }, { "kind": "field", "name": "back", "type": { "text": "boolean" }, "default": "false", "description": "Whether the modal header should have a back button", "attribute": "back" }, { "kind": "field", "name": "noClose", "type": { "text": "boolean" }, "default": "false", "description": "Lets you hide the close button in the header", "attribute": "no-close" }, { "kind": "field", "name": "_hasTopContent", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "titleEl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "method", "name": "emitBack", "privacy": "private" }, { "kind": "method", "name": "handleTopSlotChange", "privacy": "private", "parameters": [ { "name": "slotEvent", "type": { "text": "Event" } } ] } ], "events": [ { "name": "backClicked", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "description": "A short but descriptive title for the modal", "fieldName": "title" }, { "name": "back", "type": { "text": "boolean" }, "default": "false", "description": "Whether the modal header should have a back button", "fieldName": "back" }, { "name": "no-close", "type": { "text": "boolean" }, "default": "false", "description": "Lets you hide the close button in the header", "fieldName": "noClose" } ], "mixins": [ { "name": "CanCloseMixin", "module": "/packages/modal/util.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-modal", "description": "" }, "tagName": "w-modal-header", "customElement": true, "modulePath": "packages/modal-header/modal-header.ts", "definitionPath": "packages/modal-header/modal-header.ts" }, { "kind": "variable", "name": "ModalHeader", "default": "WarpModalHeader", "deprecated": "Exported for backwards compatibility. Use WarpModalHeader." } ], "exports": [ { "kind": "js", "name": "WarpModalHeader", "declaration": { "name": "WarpModalHeader", "module": "packages/modal-header/modal-header.ts" } }, { "kind": "js", "name": "ModalHeader", "declaration": { "name": "ModalHeader", "module": "packages/modal-header/modal-header.ts" } }, { "kind": "custom-element-definition", "name": "w-modal-header", "declaration": { "name": "WarpModalHeader", "module": "packages/modal-header/modal-header.ts" } } ] }, { "kind": "javascript-module", "path": "packages/page-indicator/page-indicator.ts", "declarations": [ { "kind": "class", "description": "A page indicator component that displays a series of dots representing pages.\n\nOne dot is highlighted to indicate the currently selected page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/page-indicator/frameworks/elements)", "name": "WarpPageIndicator", "members": [ { "kind": "field", "name": "selectedPage", "type": { "text": "number" }, "default": "1", "description": "Currently selected page (1-based index)", "attribute": "selected-page", "reflects": true }, { "kind": "field", "name": "pageCount", "type": { "text": "number" }, "default": "1", "description": "Total number of pages", "attribute": "page-count", "reflects": true }, { "kind": "field", "name": "_validPageCount", "type": { "text": "number" }, "privacy": "private", "description": "Validated page count (minimum 1)", "readonly": true }, { "kind": "field", "name": "_validSelectedPage", "type": { "text": "number" }, "privacy": "private", "description": "Validated selected page (clamped to valid range)", "readonly": true } ], "attributes": [ { "name": "selected-page", "type": { "text": "number" }, "default": "1", "description": "Currently selected page (1-based index)", "fieldName": "selectedPage" }, { "name": "page-count", "type": { "text": "number" }, "default": "1", "description": "Total number of pages", "fieldName": "pageCount" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-page-indicator", "customElement": true, "modulePath": "packages/page-indicator/page-indicator.ts", "definitionPath": "packages/page-indicator/page-indicator.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-page-indicator", "declaration": { "name": "WarpPageIndicator", "module": "packages/page-indicator/page-indicator.ts" } }, { "kind": "js", "name": "WarpPageIndicator", "declaration": { "name": "WarpPageIndicator", "module": "packages/page-indicator/page-indicator.ts" } } ] }, { "kind": "javascript-module", "path": "packages/pagination/pagination.ts", "declarations": [ { "kind": "class", "description": "Pagination allows users to navigate through multiple pages of content by providing navigation controls with page numbers and directional arrows.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pagination/frameworks/elements)", "name": "WarpPagination", "members": [ { "kind": "field", "name": "baseUrl", "type": { "text": "string | undefined" }, "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.", "attribute": "base-url", "reflects": true }, { "kind": "field", "name": "pages", "type": { "text": "number" }, "default": "0", "description": "The total number of pages.", "attribute": "pages", "reflects": true }, { "kind": "field", "name": "currentPageNumber", "type": { "text": "number" }, "default": "1", "description": "The currently active page number.", "attribute": "current-page", "reflects": true }, { "kind": "field", "name": "visiblePages", "type": { "text": "number" }, "default": "7", "description": "The maximum number of page numbers visible.", "attribute": "visible-pages", "reflects": true }, { "kind": "method", "name": "#dispatchClickPage", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "PointerEvent" } } ] } ], "events": [ { "name": "page-click", "type": { "text": "CustomEvent" }, "description": "Triggered when a link in the pagination is clicked. Contains the page number in `string` form." } ], "attributes": [ { "name": "base-url", "type": { "text": "string | undefined" }, "description": "The base URL used to construct page links, for example `/search?page=`.\n\nThe page number is appended to this URL.", "fieldName": "baseUrl" }, { "name": "pages", "type": { "text": "number" }, "default": "0", "description": "The total number of pages.", "fieldName": "pages" }, { "name": "current-page", "type": { "text": "number" }, "default": "1", "description": "The currently active page number.", "fieldName": "currentPageNumber" }, { "name": "visible-pages", "type": { "text": "number" }, "default": "7", "description": "The maximum number of page numbers visible.", "fieldName": "visiblePages" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-pagination", "customElement": true, "modulePath": "packages/pagination/pagination.ts", "definitionPath": "packages/pagination/pagination.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-pagination", "declaration": { "name": "WarpPagination", "module": "packages/pagination/pagination.ts" } }, { "kind": "js", "name": "WarpPagination", "declaration": { "name": "WarpPagination", "module": "packages/pagination/pagination.ts" } } ] }, { "kind": "javascript-module", "path": "packages/pill/pill.ts", "declarations": [ { "kind": "class", "description": "Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)", "name": "WarpPill", "members": [ { "kind": "field", "name": "canClose", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be removable via a close button.", "attribute": "can-close" }, { "kind": "field", "name": "suggestion", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be rendered as a suggestion.", "attribute": "suggestion" }, { "kind": "field", "name": "openSrLabel", "type": { "text": "string | undefined" }, "deprecated": "Used \"open-arial-label\" instead.", "attribute": "open-sr-label" }, { "kind": "field", "name": "openAriaLabel", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the pill.", "attribute": "open-aria-label" }, { "kind": "field", "name": "closeSrLabel", "type": { "text": "string | undefined" }, "deprecated": "Used \"close-arial-label\" instead.", "attribute": "close-sr-label" }, { "kind": "field", "name": "closeAriaLabel", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the close button.", "attribute": "close-aria-label" }, { "kind": "field", "name": "openFilterSrText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "removeFilterSrText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "_labelClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_closeClasses", "privacy": "private", "readonly": true }, { "kind": "method", "name": "_onClick", "privacy": "private" }, { "kind": "method", "name": "_onClose", "privacy": "private" } ], "events": [ { "name": "w-pill-click", "type": { "text": "CustomEvent" }, "description": "Fires when the pill itself is clicked." }, { "name": "w-pill-close", "type": { "text": "CustomEvent" }, "description": "Fires when the pill's close button is clicked." } ], "attributes": [ { "name": "can-close", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be removable via a close button.", "fieldName": "canClose" }, { "name": "suggestion", "type": { "text": "boolean" }, "default": "false", "description": "Whether the pill should be rendered as a suggestion.", "fieldName": "suggestion" }, { "name": "open-sr-label", "type": { "text": "string | undefined" }, "deprecated": "Used \"open-arial-label\" instead.", "fieldName": "openSrLabel" }, { "name": "open-aria-label", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the pill.", "fieldName": "openAriaLabel" }, { "name": "close-sr-label", "type": { "text": "string | undefined" }, "deprecated": "Used \"close-arial-label\" instead.", "fieldName": "closeSrLabel" }, { "name": "close-aria-label", "type": { "text": "string | undefined" }, "description": "Label read by screen readers when targeting the close button.", "fieldName": "closeAriaLabel" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-pill", "customElement": true, "modulePath": "packages/pill/pill.ts", "definitionPath": "packages/pill/pill.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-pill", "declaration": { "name": "WarpPill", "module": "packages/pill/pill.ts" } }, { "kind": "js", "name": "WarpPill", "declaration": { "name": "WarpPill", "module": "packages/pill/pill.ts" } } ] }, { "kind": "javascript-module", "path": "packages/radio/radio.ts", "declarations": [ { "kind": "class", "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)", "name": "WarpRadio", "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The name of the radio, submitted as a name/value pair with form data.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The radio's value. When selected, the radio group will receive this value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in a checked state (reflected to attribute).", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the radio a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in an invalid state.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "#defaultChecked", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Used for resetting." }, { "kind": "field", "name": "#invalidFromRequired", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "syncAriaDisabled", "privacy": "private" }, { "kind": "method", "name": "syncAriaChecked", "privacy": "private" }, { "kind": "field", "name": "handleClick", "privacy": "private" }, { "kind": "field", "name": "handleInvalid", "privacy": "private" }, { "kind": "field", "name": "handleKeyDown", "privacy": "private" }, { "kind": "method", "name": "isInGroup", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getRadioScope", "privacy": "private", "return": { "type": { "text": "ParentNode" } } }, { "kind": "method", "name": "getStandaloneNamedRadios", "privacy": "private", "return": { "type": { "text": "WarpRadio[]" } } }, { "kind": "method", "name": "syncStandaloneTabOrder", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "_internalTabIndex", "type": { "text": "number" }, "privacy": "private", "description": "Computed tabindex for the internal focusable element.\nPriority: group-managed > standalone-managed > default", "readonly": true }, { "kind": "method", "name": "uncheckOtherRadios", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateValidity", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "syncFormValue", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "shouldSyncFormState", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "changedProperties", "type": { "text": "PropertyValues<this>" } } ] } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "The name of the radio, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | null" }, "default": "null", "description": "The radio's value. When selected, the radio group will receive this value.", "fieldName": "value" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in a checked state (reflected to attribute).", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the radio a required field.", "fieldName": "required" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Draws the radio in an invalid state.", "fieldName": "invalid" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-radio-group", "description": "" }, "tagName": "w-radio", "customElement": true, "modulePath": "packages/radio/radio.ts", "definitionPath": "packages/radio/radio.ts" }, { "kind": "variable", "name": "WRadio", "default": "WarpRadio", "deprecated": "Exported for backwards compatibility only, use `WarpRadio`" } ], "exports": [ { "kind": "js", "name": "WarpRadio", "declaration": { "name": "WarpRadio", "module": "packages/radio/radio.ts" } }, { "kind": "js", "name": "WRadio", "declaration": { "name": "WRadio", "module": "packages/radio/radio.ts" } }, { "kind": "custom-element-definition", "name": "w-radio", "declaration": { "name": "WarpRadio", "module": "packages/radio/radio.ts" } } ] }, { "kind": "javascript-module", "path": "packages/radio-group/radio-group.ts", "declarations": [ { "kind": "class", "description": "Radios allow users to select a single option from a list of choices.\n\nWrap individual radio components in a radio group.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/radio/frameworks/elements)", "name": "WarpRadioGroup", "slots": [ { "description": "Alternative to the `label` attribute should you need custom HTML.", "name": "label" }, { "description": "Alternative to the `help-text` attribute should you need custom HTML.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "hasWarnedMissingName", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "autoTabIndex", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "\"\"", "description": "Label for the radio group.", "attribute": "label" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "\"\"", "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.", "attribute": "help-text" }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Marks the radio group as invalid.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | null" }, "default": "null", "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio group and all child radios.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes selecting a radio in the the group required.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "defaultCheckedValue", "type": { "text": "string | null | undefined" }, "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "slottedHelpText", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "nameManagedRadios", "privacy": "private", "readonly": true, "default": "new WeakSet<WarpRadio>()" }, { "kind": "field", "name": "disabledManagedRadios", "privacy": "private", "readonly": true, "default": "new WeakSet<WarpRadio>()" }, { "kind": "field", "name": "unsubscribeI18n", "type": { "text": "() => void | undefined" }, "privacy": "private" }, { "kind": "field", "name": "handleRadioClick", "privacy": "private" }, { "kind": "method", "name": "getAllRadios", "privacy": "private" }, { "kind": "method", "name": "getCheckedValue", "privacy": "private", "return": { "type": { "text": "string | null" } } }, { "kind": "method", "name": "getEnabledRadios", "privacy": "private", "return": { "type": { "text": "WarpRadio[]" } }, "parameters": [ { "name": "radios", "default": "this.getAllRadios()" } ] }, { "kind": "method", "name": "selectSingleRadio", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "selected", "type": { "text": "WarpRadio" } }, { "name": "radios", "default": "this.getAllRadios()" } ] }, { "kind": "method", "name": "handleLabelClick", "privacy": "private" }, { "kind": "field", "name": "handleInvalid", "privacy": "private" }, { "kind": "field", "name": "handleHelpTextSlotChange", "privacy": "private" }, { "kind": "field", "name": "handleI18nChange", "privacy": "private" }, { "kind": "method", "name": "syncRadioElements", "privacy": "private" }, { "kind": "method", "name": "syncRadioDisabledState", "privacy": "private", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "radio", "type": { "text": "WarpRadio" } } ] }, { "kind": "method", "name": "syncTabOrder", "privacy": "private", "parameters": [ { "name": "radios", "type": { "text": "WarpRadio[]" } } ] }, { "kind": "field", "name": "emitSelectionChange", "privacy": "private" }, { "kind": "method", "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "hasSlottedContent", "privacy": "private", "parameters": [ { "name": "name", "type": { "text": "\"label\" | \"help-text\"" } } ] }, { "kind": "method", "name": "syncFormValue", "privacy": "private" }, { "kind": "method", "name": "syncSlottedHelpText", "privacy": "private" }, { "kind": "method", "name": "updateValidity", "privacy": "private" }, { "kind": "method", "name": "normalizeCheckedRadios", "privacy": "private", "parameters": [ { "name": "radios", "type": { "text": "WarpRadio[]" } } ] }, { "kind": "field", "name": "captureDefaultSelection", "privacy": "private" }, { "kind": "method", "name": "syncChildInvalid", "privacy": "private", "parameters": [ { "name": "isInvalid", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "setValidityState", "privacy": "private", "parameters": [ { "name": "state", "type": { "text": "ValidityStateFlags" } } ] }, { "kind": "method", "name": "syncHostTabIndex", "privacy": "private", "parameters": [ { "name": "shouldBeFocusable", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "warnIfMissingName", "privacy": "private" } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "\"\"", "description": "Label for the radio group.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string" }, "default": "\"\"", "description": "Help text for the radio group.\n\nIf you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.", "fieldName": "helpText" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show optional text next to the label.", "fieldName": "optional" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Marks the radio group as invalid.", "fieldName": "invalid" }, { "name": "name", "type": { "text": "string | null" }, "default": "null", "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "fieldName": "name" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the radio group and all child radios.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes selecting a radio in the the group required.", "fieldName": "required" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-radio-group", "customElement": true, "modulePath": "packages/radio-group/radio-group.ts", "definitionPath": "packages/radio-group/radio-group.ts" }, { "kind": "variable", "name": "WRadioGroup", "default": "WarpRadioGroup", "deprecated": "Exported for backwards compatibility only, use `WarpRadioGroup`" } ], "exports": [ { "kind": "js", "name": "WarpRadioGroup", "declaration": { "name": "WarpRadioGroup", "module": "packages/radio-group/radio-group.ts" } }, { "kind": "js", "name": "WRadioGroup", "declaration": { "name": "WRadioGroup", "module": "packages/radio-group/radio-group.ts" } }, { "kind": "custom-element-definition", "name": "w-radio-group", "declaration": { "name": "WarpRadioGroup", "module": "packages/radio-group/radio-group.ts" } } ] }, { "kind": "javascript-module", "path": "packages/select/select.ts", "declarations": [ { "kind": "class", "description": "A dropdown component for selecting a single value.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/select/frameworks/elements)", "name": "WarpSelect", "members": [ { "kind": "field", "name": "autoFocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render.", "deprecated": "Use the native `autofocus` attribute instead.", "attribute": "auto-focus", "reflects": true }, { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render", "attribute": "autofocus", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in an invalid state.\n\nPaired with `help-text` to provide feedback about the error.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "always", "type": { "text": "boolean" }, "default": "false", "description": "Whether to always show a hint.", "deprecated": "Use `help-text` instead and only set it if you want to display the help text.", "attribute": "always", "reflects": true }, { "kind": "field", "name": "hint", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.", "deprecated": "Use `help-text` instead.", "attribute": "hint", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The content to display as the label.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a disabled state.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "deprecated": "Use the native readonly attribute instead.", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "_options", "type": { "text": "Array<TemplateResult>" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#onPageShow", "privacy": "private" }, { "kind": "field", "name": "#lightDomObserver", "privacy": "private", "type": { "text": "MutationObserver | undefined" } }, { "kind": "method", "name": "#getOptionNodes", "privacy": "private" }, { "kind": "method", "name": "#getNativeSelect", "privacy": "private" }, { "kind": "method", "name": "#hasExplicitlySelectedOption", "privacy": "private" }, { "kind": "method", "name": "#syncNativeOptionSelection", "privacy": "private", "parameters": [ { "name": "nextValue", "type": { "text": "string" } } ] }, { "kind": "method", "name": "#syncFromNativeSelect", "privacy": "private", "parameters": [ { "name": "{\n\t\tallowDefaultFirstOption = false,\n\t}", "default": "{}", "type": { "text": "{ allowDefaultFirstOption?: boolean }" } } ] }, { "kind": "method", "name": "#syncShadowOptionsFromLightDom", "privacy": "private", "parameters": [ { "name": "{\n\t\tsyncValueFromSelected = false,\n\t}", "default": "{}", "type": { "text": "{ syncValueFromSelected?: boolean }" } } ] }, { "kind": "field", "name": "#classes", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#helpTextClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#chevronClasses", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#id", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#helpId", "privacy": "private", "readonly": true }, { "kind": "method", "name": "onChange", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "events": [ { "name": "change", "type": { "text": "CustomEvent" } } ], "attributes": [ { "name": "auto-focus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render.", "deprecated": "Use the native `autofocus` attribute instead.", "fieldName": "autoFocus" }, { "name": "autofocus", "type": { "text": "boolean" }, "default": "false", "description": "Whether the element should receive focus on render", "fieldName": "autofocus" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.\n\nPaired with `invalid` to show the text as a validation error.", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in an invalid state.\n\nPaired with `help-text` to provide feedback about the error.", "fieldName": "invalid" }, { "name": "always", "type": { "text": "boolean" }, "default": "false", "description": "Whether to always show a hint.", "deprecated": "Use `help-text` instead and only set it if you want to display the help text.", "fieldName": "always" }, { "name": "hint", "type": { "text": "string | undefined" }, "description": "The content displayed as the help text.", "deprecated": "Use `help-text` instead.", "fieldName": "hint" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "The content to display as the label.", "fieldName": "label" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a disabled state.", "fieldName": "disabled" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "deprecated": "Use the native readonly attribute instead.", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Renders the field in a readonly state.", "fieldName": "readonly" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value.", "fieldName": "value" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-select", "customElement": true, "modulePath": "packages/select/select.ts", "definitionPath": "packages/select/select.ts" } ], "exports": [ { "kind": "js", "name": "WarpSelect", "declaration": { "name": "WarpSelect", "module": "packages/select/select.ts" } }, { "kind": "custom-element-definition", "name": "w-select", "declaration": { "name": "WarpSelect", "module": "packages/select/select.ts" } } ] }, { "kind": "javascript-module", "path": "packages/slider-thumb/slider-thumb.ts", "declarations": [ { "kind": "class", "description": "Component to place inside a `<w-slider>`.", "name": "WarpSliderThumb", "members": [ { "kind": "field", "name": "ariaLabel", "type": { "text": "string | null" }, "default": "null", "description": "Label for the range input.", "attribute": "aria-label" }, { "kind": "field", "name": "ariaDescription", "type": { "text": "string | null" }, "default": "null", "description": "Contextual information for assistive technology, should it be needed", "attribute": "aria-description" }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name of this input field in the form. The canonical source of the value is the text field.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "The initial value, if any", "attribute": "value", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Placeholder in empty text fields", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "method", "name": "#showTooltip", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#hideTooltip", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#syncRangeValue", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#handleValidity", "privacy": "private", "parameters": [ { "name": "error", "type": { "text": "string" } } ] }, { "kind": "method", "name": "updateFieldAfterValidation", "type": { "text": "updateFieldAfterValidation() => void" } }, { "kind": "method", "name": "#handleValueChange", "privacy": "private", "return": { "type": { "text": "Promise<{ shouldCancel: boolean; originalValue?: string }>" } }, "parameters": [ { "name": "value", "type": { "text": "string" } }, { "name": "isFromTextInput", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "#onInput", "privacy": "private", "return": { "type": { "text": "Promise<boolean>" } }, "parameters": [ { "name": "e", "type": { "text": "InputEvent | CustomEvent" } } ] }, { "kind": "method", "name": "#onRangeSliderKeyDown", "privacy": "private", "return": { "type": { "text": "Promise<void>" } }, "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#onInputFieldKeyDown", "privacy": "private", "return": { "type": { "text": "Promise<void>" } }, "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] } ], "events": [ { "name": "thumbreset", "type": { "text": "CustomEvent" }, "description": "Internal event used by (and stopped by) `w-slider`." }, { "name": "slidervalidity", "type": { "text": "CustomEvent" }, "description": "Internal event used by (and stopped by) `w-slider`." } ], "attributes": [ { "name": "aria-label", "type": { "text": "string | null" }, "default": "null", "description": "Label for the range input.", "fieldName": "ariaLabel" }, { "name": "aria-description", "type": { "text": "string | null" }, "default": "null", "description": "Contextual information for assistive technology, should it be needed", "fieldName": "ariaDescription" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name of this input field in the form. The canonical source of the value is the text field.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "The initial value, if any", "fieldName": "value" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Placeholder in empty text fields", "fieldName": "placeholder" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-slider", "description": "" }, "tagName": "w-slider-thumb", "customElement": true, "modulePath": "packages/slider-thumb/slider-thumb.ts", "definitionPath": "packages/slider-thumb/slider-thumb.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-slider-thumb", "declaration": { "name": "WarpSliderThumb", "module": "packages/slider-thumb/slider-thumb.ts" } }, { "kind": "js", "name": "WarpSliderThumb", "declaration": { "name": "WarpSliderThumb", "module": "packages/slider-thumb/slider-thumb.ts" } } ] }, { "kind": "javascript-module", "path": "packages/slider/slider.ts", "declarations": [ { "kind": "class", "description": "Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/slider/frameworks/elements)", "name": "WarpSlider", "slots": [ { "description": "For single sliders place a `<w-slider-thumb>` in the default slot.", "name": "" }, { "description": "Label for the slider or range slider as a whole.", "name": "label" }, { "description": "Optional description between the label and slider.", "name": "description" }, { "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.", "name": "from" }, { "description": "Range sliders need to place a `<w-slider-thumb>` in the from and to slots.", "name": "to" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)", "attribute": "label", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "openEnded", "type": { "text": "boolean" }, "default": "false", "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".", "attribute": "open-ended" }, { "kind": "field", "name": "error", "type": { "text": "string | undefined" }, "description": "Validation error text, if any", "attribute": "error", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Additional description to show below the fieldset", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Sets the form fields and fieldset in an invalid state", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures a child slider thumb has a value before allowing the containing form to submit", "attribute": "required", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "min", "type": { "text": "string | undefined" }, "description": "The minimum allowed value in the range inputs", "default": "0", "attribute": "min", "reflects": true }, { "kind": "field", "name": "max", "type": { "text": "string | undefined" }, "description": "The maximum allowed value in the range inputs", "default": "100", "attribute": "max", "reflects": true }, { "kind": "field", "name": "markers", "type": { "text": "number | undefined" }, "description": "Pass a value similar to step to create visual markers at that interval", "attribute": "markers", "reflects": true }, { "kind": "field", "name": "step", "type": { "text": "number | undefined" }, "description": "ets step on the range input to jump between values when dragging", "attribute": "step", "reflects": true }, { "kind": "field", "name": "suffix", "type": { "text": "string | undefined" }, "description": "Suffix used in text input fields and for the min and max values of the slider", "attribute": "suffix", "reflects": true }, { "kind": "field", "name": "hiddenTextfield", "type": { "text": "boolean" }, "default": "false", "description": "Should only be used in special cases", "attribute": "hidden-textfield", "reflects": true }, { "kind": "field", "name": "valueFormatter", "type": { "text": "((value: string, slot: SliderSlot) => string) | undefined" }, "description": "Formatter for the tooltip and input mask values" }, { "kind": "field", "name": "tooltipFormatter", "type": { "text": "((value: string, slot: SliderSlot) => string) | undefined" }, "description": "Overrides valueFormatter for the tooltip.\n\nUse in open-ended sliders to show for example \"300+ hk\" instead of \"Max\" in the tooltip." }, { "kind": "field", "name": "labelFormatter", "type": { "text": "((slot: SliderSlot) => string) | undefined" }, "description": "Formatter for the min and max labels below the range." }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "method", "name": "#syncSliderThumbs", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#onThumbReset", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "CustomEvent" } } ] }, { "kind": "method", "name": "#onInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ] }, { "kind": "method", "name": "#onBlur", "privacy": "private" }, { "kind": "method", "name": "#handleKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#doValidation", "privacy": "private" }, { "kind": "method", "name": "#onSliderValidity", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "CustomEvent" } } ] }, { "kind": "method", "name": "#getEdgeValue", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "boundary", "type": { "text": "string" } }, { "name": "input", "type": { "text": "WarpSliderThumb" } } ] }, { "kind": "method", "name": "#updateActiveTrack", "privacy": "private", "parameters": [ { "name": "input", "type": { "text": "WarpSliderThumb" } } ], "description": "We use CSS variables to fill the active track with a background color." }, { "kind": "method", "name": "_handleLabelSlotChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "field", "name": "_label", "readonly": true }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "attributes": [ { "name": "label", "type": { "text": "string | undefined" }, "description": "The slider fieldset label. Required for proper accessibility.\n\nIf you need to display HTML, use the `label` slot instead (f. ex. `<legend class=\"sr-only\" slot=\"label\">Production year</legend>`)", "fieldName": "label" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.", "fieldName": "tooltip" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "open-ended", "type": { "text": "boolean" }, "default": "false", "description": "Whether or not to allow values outside the range such as \"Before 1950\" and \"2025+\".", "fieldName": "openEnded" }, { "name": "error", "type": { "text": "string | undefined" }, "description": "Validation error text, if any", "fieldName": "error" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Additional description to show below the fieldset", "fieldName": "helpText" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Sets the form fields and fieldset in an invalid state", "fieldName": "invalid" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures a child slider thumb has a value before allowing the containing form to submit", "fieldName": "required" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the optional indicator after the label.", "fieldName": "optional" }, { "name": "min", "type": { "text": "string | undefined" }, "description": "The minimum allowed value in the range inputs", "default": "0", "fieldName": "min" }, { "name": "max", "type": { "text": "string | undefined" }, "description": "The maximum allowed value in the range inputs", "default": "100", "fieldName": "max" }, { "name": "markers", "type": { "text": "number | undefined" }, "description": "Pass a value similar to step to create visual markers at that interval", "fieldName": "markers" }, { "name": "step", "type": { "text": "number | undefined" }, "description": "ets step on the range input to jump between values when dragging", "fieldName": "step" }, { "name": "suffix", "type": { "text": "string | undefined" }, "description": "Suffix used in text input fields and for the min and max values of the slider", "fieldName": "suffix" }, { "name": "hidden-textfield", "type": { "text": "boolean" }, "default": "false", "description": "Should only be used in special cases", "fieldName": "hiddenTextfield" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-slider", "customElement": true, "modulePath": "packages/slider/slider.ts", "definitionPath": "packages/slider/slider.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-slider", "declaration": { "name": "WarpSlider", "module": "packages/slider/slider.ts" } }, { "kind": "js", "name": "WarpSlider", "declaration": { "name": "WarpSlider", "module": "packages/slider/slider.ts" } } ] }, { "kind": "javascript-module", "path": "packages/snackbar-item/snackbar-item.ts", "declarations": [ { "kind": "class", "description": "An item to show in a `w-snackbar`.\n\nSee the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)", "name": "WarpSnackbarItem", "cssProperties": [ { "name": "--w-c-snackbar-item-radius" }, { "name": "--w-c-snackbar-item-max-width" }, { "name": "--w-c-snackbar-item-min-width" }, { "name": "--w-c-snackbar-item-padding" }, { "name": "--w-c-snackbar-item-bg" }, { "name": "--w-c-snackbar-item-action-bg-active" }, { "name": "--w-c-snackbar-item-action-bg-hover" }, { "name": "--w-c-snackbar-item-color" }, { "name": "--w-c-snackbar-item-action-color-active" }, { "name": "--w-c-snackbar-item-action-color-hover" }, { "name": "--w-c-snackbar-item-box-shadow" } ], "cssParts": [ { "description": "the container wrapping the message, icon and actions.", "name": "item" }, { "description": "the icon for the variant.", "name": "icon" }, { "description": "the default slot, body of the snackbar item.", "name": "message" }, { "description": "close and action button.", "name": "action" } ], "slots": [ { "description": "the snackbar message.", "name": "default" }, { "description": "icon preceeding the message.", "name": "icon" }, { "description": "action following the message.", "name": "action" } ], "members": [ { "kind": "field", "name": "actionPlacement", "type": { "text": "SnackbarActionPlacement" }, "default": "\"inline\"", "description": "The placement of the action and close buttons.", "attribute": "action-placement", "reflects": true, "parsedType": { "text": "'inline' | 'block'" } }, { "kind": "field", "name": "duration", "type": { "text": "number" }, "description": "How long the message should stay in the document before removing itself.", "attribute": "duration", "reflects": true }, { "kind": "field", "name": "root", "type": { "text": "HTMLDivElement | null" }, "privacy": "private" }, { "kind": "field", "name": "hasAction", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#expanded", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#durationLeft", "privacy": "private", "type": { "text": "number" } }, { "kind": "field", "name": "#lastFocused", "privacy": "private", "type": { "text": "HTMLElement | null" }, "default": "null" }, { "kind": "field", "name": "#timer", "privacy": "private", "type": { "text": "ReturnType<typeof setTimeout> | null" }, "default": "null" }, { "kind": "field", "name": "#timerPaused", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "close", "return": { "type": { "text": "void" } }, "description": "Remove the snackbar item from the document.\n\nMoves focus to the last focused element outside of the snackbar item, if available.", "type": { "text": "close() => void" } }, { "kind": "method", "name": "#onFocusIn", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Listen to focusin, not focus, as focus does not bubble.\n\nWe're interested in running code when an action button gets focus,\nsuch as pausing the countdown and storing the last focused element\noutside of the snackbar so we can return there when it closes.\n\nOnly save the first instance of `relatedTarget` so we don't overwrite\nit when focus moves from an action button to the close button." }, { "kind": "method", "name": "#onFocusOut", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "FocusEvent" } } ], "description": "Listen to focusout, not blur, as blur does not bubble.\n\nUnpause the countdown by clearing this.#lastFocused\nif the focus is moving outside of the snackbar item." }, { "kind": "method", "name": "#onMouseEnter", "privacy": "private" }, { "kind": "method", "name": "#onMouseLeave", "privacy": "private" }, { "kind": "method", "name": "#hasAction", "privacy": "private" } ], "attributes": [ { "name": "action-placement", "type": { "text": "SnackbarActionPlacement" }, "default": "\"inline\"", "description": "The placement of the action and close buttons.", "fieldName": "actionPlacement", "parsedType": { "text": "'inline' | 'block'" } }, { "name": "duration", "type": { "text": "number" }, "description": "How long the message should stay in the document before removing itself.", "fieldName": "duration" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-snackbar", "description": "" }, "tagName": "w-snackbar-item", "customElement": true, "modulePath": "packages/snackbar-item/snackbar-item.ts", "definitionPath": "packages/snackbar-item/snackbar-item.ts" } ], "exports": [ { "kind": "js", "name": "WarpSnackbarItem", "declaration": { "name": "WarpSnackbarItem", "module": "packages/snackbar-item/snackbar-item.ts" } }, { "kind": "custom-element-definition", "name": "w-snackbar-item", "declaration": { "name": "WarpSnackbarItem", "module": "packages/snackbar-item/snackbar-item.ts" } } ] }, { "kind": "javascript-module", "path": "packages/snackbar/snackbar.ts", "declarations": [ { "kind": "class", "description": "A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.\n\nInclude one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/snackbar/frameworks/elements)", "name": "WarpSnackbar", "cssProperties": [ { "name": "--w-c-snackbar-container-gap" }, { "name": "--w-c-snackbar-position-bottom" }, { "name": "--w-c-snackbar-position-left" }, { "name": "--w-c-snackbar-position-right" }, { "name": "--w-c-snackbar-position-top" }, { "name": "--w-c-snackbar-z-index" } ], "cssParts": [ { "description": "the live region that positions messages on the screen.", "name": "container" } ], "slots": [ { "description": "`w-snackbar-item` gets placed inside the default slot by the `create` function.", "name": "default" } ], "members": [ { "kind": "method", "name": "create", "return": { "type": { "text": "" } }, "parameters": [ { "name": "message", "type": { "text": "string" } }, { "name": "options", "default": "{}", "type": { "text": "CreateSnackbarOptions" } } ], "description": "Creates a snackbar item and immediately adds it to the snackbar.\n\nBy default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).\n\nIf you include an `action` in the options the default `duration` is\nset to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.\n\nA `duration` of 10 seconds or longer forces the close button to be visible.\n\nThe default `variant` is `neutral` which does not have an icon.\n\nSet `duration` to `SnackbarDuration.Infinite` if you want a persistent message.", "type": { "text": "create(message: string, options: CreateSnackbarOptions = {}) => void" } } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-snackbar", "customElement": true, "modulePath": "packages/snackbar/snackbar.ts", "definitionPath": "packages/snackbar/snackbar.ts" } ], "exports": [ { "kind": "js", "name": "WarpSnackbar", "declaration": { "name": "WarpSnackbar", "module": "packages/snackbar/snackbar.ts" } }, { "kind": "custom-element-definition", "name": "w-snackbar", "declaration": { "name": "WarpSnackbar", "module": "packages/snackbar/snackbar.ts" } } ] }, { "kind": "javascript-module", "path": "packages/step/step.ts", "declarations": [ { "kind": "class", "description": "Individual step component that shows a single step in a process.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)", "name": "WarpStep", "members": [ { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is active.\n\nThe active step displays a filled indicator.", "attribute": "active", "reflects": true }, { "kind": "field", "name": "completed", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.", "attribute": "completed", "reflects": true }, { "kind": "field", "name": "_context", "type": { "text": "StepsContext" }, "privacy": "private", "default": "{ horizontal: false, right: false, isLast: false, isFirst: false, }" }, { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "method", "name": "setContext", "parameters": [ { "name": "context", "type": { "text": "StepsContext" } } ], "type": { "text": "setContext(context: StepsContext) => void" } }, { "kind": "method", "name": "getAriaLabel", "type": { "text": "getAriaLabel() => void" } } ], "attributes": [ { "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is active.\n\nThe active step displays a filled indicator.", "fieldName": "active" }, { "name": "completed", "type": { "text": "boolean" }, "default": "false", "description": "Whether this step is completed.\n\nCompleted steps display a checkmark icon and a filled indicator.", "fieldName": "completed" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-step-indicator", "description": "" }, "tagName": "w-step", "customElement": true, "modulePath": "packages/step/step.ts", "definitionPath": "packages/step/step.ts" } ], "exports": [ { "kind": "js", "name": "WarpStep", "declaration": { "name": "WarpStep", "module": "packages/step/step.ts" } }, { "kind": "custom-element-definition", "name": "w-step", "declaration": { "name": "WarpStep", "module": "packages/step/step.ts" } } ] }, { "kind": "javascript-module", "path": "packages/step-indicator/step-indicator.ts", "declarations": [ { "kind": "class", "description": "Steps are used to show progress through a process or to guide users through a multi-step task.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/steps/frameworks/elements)", "name": "WarpStepIndicator", "members": [ { "kind": "field", "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Display steps horizontally instead of vertically", "attribute": "horizontal", "reflects": true }, { "kind": "field", "name": "right", "type": { "text": "boolean" }, "default": "false", "description": "Align steps to the right (vertical layout only)", "attribute": "right", "reflects": true } ], "attributes": [ { "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Display steps horizontally instead of vertically", "fieldName": "horizontal" }, { "name": "right", "type": { "text": "boolean" }, "default": "false", "description": "Align steps to the right (vertical layout only)", "fieldName": "right" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-step-indicator", "customElement": true, "modulePath": "packages/step-indicator/step-indicator.ts", "definitionPath": "packages/step-indicator/step-indicator.ts" } ], "exports": [ { "kind": "js", "name": "WarpStepIndicator", "declaration": { "name": "WarpStepIndicator", "module": "packages/step-indicator/step-indicator.ts" } }, { "kind": "custom-element-definition", "name": "w-step-indicator", "declaration": { "name": "WarpStepIndicator", "module": "packages/step-indicator/step-indicator.ts" } } ] }, { "kind": "javascript-module", "path": "packages/switch/switch.ts", "declarations": [ { "kind": "class", "description": "The Switch component allows users to toggle between two states.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/switch/frameworks/elements)", "name": "WarpSwitch", "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Name used when submitting an HTML form.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is on (checked).", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is disabled.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "#initialState", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } } ], "events": [ { "name": "change", "type": { "text": "WarpSwitchChangeEvent" }, "description": "Dispatched when the switch toggles. Includes boolean `checked` and string/null `value` on `details`.", "parsedType": { "text": "{ detail: { checked: false | true, value: null | string }, initCustomEvent: { }, bubbles: false | true, cancelBubble: false | true, cancelable: false | true, composed: false | true, currentTarget: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, defaultPrevented: false | true, eventPhase: number, isTrusted: false | true, returnValue: false | true, srcElement: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, target: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, timeStamp: number, type: string, composedPath: { }, initEvent: { }, preventDefault: { }, stopImmediatePropagation: { }, stopPropagation: { }, NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 }" } } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "Name used when submitting an HTML form.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "description": "Value submitted when the switch is checked.\n\nThe component reports `null` as the value in the `change` event when `value` is an empty string.", "fieldName": "value" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is on (checked).", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Whether the switch is disabled.", "fieldName": "disabled" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-switch", "customElement": true, "modulePath": "packages/switch/switch.ts", "definitionPath": "packages/switch/switch.ts" } ], "exports": [ { "kind": "js", "name": "WarpSwitch", "declaration": { "name": "WarpSwitch", "module": "packages/switch/switch.ts" } }, { "kind": "custom-element-definition", "name": "w-switch", "declaration": { "name": "WarpSwitch", "module": "packages/switch/switch.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tab/tab.ts", "declarations": [ { "kind": "class", "description": "Individual tab component used within w-tabs container.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTab", "members": [ { "kind": "field", "name": "_handleClick", "privacy": "private" }, { "kind": "field", "name": "tabindex", "type": { "text": "number" }, "default": "0", "description": "The host element (`<w-tab>`), the one with `role=tab`, must be the focusable element for assistive technology.", "attribute": "tabindex" }, { "kind": "field", "name": "for", "type": { "text": "string | undefined" }, "description": "The `id` of the `<w-tab-panel>` this tab controls.", "attribute": "for", "reflects": true }, { "kind": "field", "name": "_effectiveAriaControls", "type": { "text": "string" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "_ownAriaSelected", "type": { "text": "\"true\" | \"false\" | undefined" }, "privacy": "private" }, { "kind": "field", "name": "over", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the `icon` slot over the tab title instead of inline.", "attribute": "over", "reflects": true }, { "kind": "field", "name": "_classes", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_hasIcon", "privacy": "private", "readonly": true }, { "kind": "method", "name": "syncAriaControls", "privacy": "private" }, { "kind": "field", "name": "_internals" } ], "attributes": [ { "name": "tabindex", "type": { "text": "number" }, "default": "0", "description": "The host element (`<w-tab>`), the one with `role=tab`, must be the focusable element for assistive technology.", "fieldName": "tabindex" }, { "name": "for", "type": { "text": "string | undefined" }, "description": "The `id` of the `<w-tab-panel>` this tab controls.", "fieldName": "for" }, { "name": "over", "type": { "text": "boolean" }, "default": "false", "description": "Whether to show the `icon` slot over the tab title instead of inline.", "fieldName": "over" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-tabs", "description": "" }, "tagName": "w-tab", "customElement": true, "modulePath": "packages/tab/tab.ts", "definitionPath": "packages/tab/tab.ts" } ], "exports": [ { "kind": "js", "name": "WarpTab", "declaration": { "name": "WarpTab", "module": "packages/tab/tab.ts" } }, { "kind": "custom-element-definition", "name": "w-tab", "declaration": { "name": "WarpTab", "module": "packages/tab/tab.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tab-panel/tab-panel.ts", "declarations": [ { "kind": "class", "description": "Tab panel component that holds content for individual tabs.\n\nEach tab panel should have a name that matches a corresponding tab.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTabPanel", "members": [ { "kind": "field", "name": "_internals", "type": { "text": "ElementInternals" }, "privacy": "private" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "description": "Required so `<w-tab>` has something to target.", "attribute": "id", "reflects": true }, { "kind": "field", "name": "_ownActive", "type": { "text": "boolean | undefined" }, "privacy": "private" }, { "kind": "method", "name": "syncA11yState", "privacy": "private" } ], "attributes": [ { "name": "id", "type": { "text": "string" }, "description": "Required so `<w-tab>` has something to target.", "fieldName": "id" } ], "superclass": { "name": "LitElement", "package": "lit" }, "parent": { "name": "w-tabs", "description": "" }, "tagName": "w-tab-panel", "customElement": true, "modulePath": "packages/tab-panel/tab-panel.ts", "definitionPath": "packages/tab-panel/tab-panel.ts" } ], "exports": [ { "kind": "js", "name": "WarpTabPanel", "declaration": { "name": "WarpTabPanel", "module": "packages/tab-panel/tab-panel.ts" } }, { "kind": "custom-element-definition", "name": "w-tab-panel", "declaration": { "name": "WarpTabPanel", "module": "packages/tab-panel/tab-panel.ts" } } ] }, { "kind": "javascript-module", "path": "packages/tabs/tabs.ts", "declarations": [ { "kind": "class", "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)", "name": "WarpTabs", "members": [ { "kind": "field", "name": "active", "type": { "text": "string | undefined" }, "description": "The `id` of the panel that should be active.", "default": "\"\" (Shows the first tab)", "attribute": "active", "reflects": true }, { "kind": "field", "name": "tabList", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "selectionIndicator", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "_uniqueId", "privacy": "private" }, { "kind": "field", "name": "_activeTabFor", "type": { "text": "string | undefined" }, "privacy": "private", "default": "\"\"" }, { "kind": "field", "name": "_resizeObserver", "type": { "text": "ResizeObserver | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_updateSelectionIndicatorDebounced", "privacy": "private" }, { "kind": "field", "name": "_assignSlots", "privacy": "private" }, { "kind": "method", "name": "_initializeActiveTab", "privacy": "private" }, { "kind": "field", "name": "_handleTabClick", "privacy": "private" }, { "kind": "method", "name": "_notifyTabChange", "privacy": "private" }, { "kind": "method", "name": "updateSelectionIndicator", "privacy": "private" }, { "kind": "method", "name": "updatePanels", "privacy": "private" }, { "kind": "field", "name": "_handleKeyDown", "privacy": "private" }, { "kind": "field", "name": "_tabCount", "privacy": "private", "readonly": true }, { "kind": "field", "name": "_gridClass", "privacy": "private", "readonly": true } ], "events": [ { "name": "change", "type": { "text": "WarpTabsChangeEvent" }, "description": "Includes `details.panelId` with the now active tab panel's ID", "parsedType": { "text": "{ detail: { panelId: string }, initCustomEvent: { }, bubbles: false | true, cancelBubble: false | true, cancelable: false | true, composed: false | true, currentTarget: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, defaultPrevented: false | true, eventPhase: number, isTrusted: false | true, returnValue: false | true, srcElement: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, target: null | { addEventListener: { }, dispatchEvent: { }, removeEventListener: { } }, timeStamp: number, type: string, composedPath: { }, initEvent: { }, preventDefault: { }, stopImmediatePropagation: { }, stopPropagation: { }, NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 }" } } ], "attributes": [ { "name": "active", "type": { "text": "string | undefined" }, "description": "The `id` of the panel that should be active.", "default": "\"\" (Shows the first tab)", "fieldName": "active" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-tabs", "customElement": true, "modulePath": "packages/tabs/tabs.ts", "definitionPath": "packages/tabs/tabs.ts" } ], "exports": [ { "kind": "js", "name": "WarpTabs", "declaration": { "name": "WarpTabs", "module": "packages/tabs/tabs.ts" } }, { "kind": "custom-element-definition", "name": "w-tabs", "declaration": { "name": "WarpTabs", "module": "packages/tabs/tabs.ts" } } ] }, { "kind": "javascript-module", "path": "packages/textarea/textarea.ts", "declarations": [ { "kind": "class", "description": "A multi-line text input with built-in form validation, auto-resizing, and styling support.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/text-area/frameworks/elements)", "name": "WarpTextarea", "members": [ { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "attribute": "invalid", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "attribute": "help-text", "reflects": true }, { "kind": "field", "name": "maxRows", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "attribute": "maximum-rows", "reflects": true }, { "kind": "field", "name": "minRows", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of text rows the textarea should display", "attribute": "minimum-rows", "reflects": true }, { "kind": "field", "name": "maxLength", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "attribute": "maxlength", "reflects": true }, { "kind": "field", "name": "minLength", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of characters for the textarea to be valid", "attribute": "minlength", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form", "attribute": "name", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textarea when it doesn't have a value", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "readOnly", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native `readonly` attribute instead", "attribute": "read-only", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "attribute": "required", "reflects": true }, { "kind": "field", "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "attribute": "tooltip", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value", "attribute": "value", "reflects": true }, { "kind": "field", "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Show an icon behind the label indicating the field is optional", "attribute": "optional", "reflects": true }, { "kind": "field", "name": "minHeight", "privacy": "private" }, { "kind": "field", "name": "maxHeight", "privacy": "private" }, { "kind": "field", "name": "_textarea", "type": { "text": "HTMLTextAreaElement" }, "privacy": "private" }, { "kind": "field", "name": "_hasHelpTextSlot", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "#hasHelpText", "privacy": "private", "readonly": true }, { "kind": "field", "name": "#initialValue", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#validationActive", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#originalHelpText", "privacy": "private", "type": { "text": "string | undefined" }, "default": "undefined" }, { "kind": "field", "name": "#hasInteracted", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#customValidationMessage", "privacy": "private", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "method", "name": "resetFormControl", "return": { "type": { "text": "void" } }, "type": { "text": "resetFormControl() => void" } }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "description": "Returns the validation message if the textarea is invalid, otherwise an empty string", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "description": "Returns the validity state of the textarea", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks whether the textarea passes constraint validation", "type": { "text": "checkValidity() => boolean" } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks validity and shows the validation message if invalid", "type": { "text": "reportValidity() => boolean" } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to clear.", "type": { "text": "setCustomValidity(message: string) => void" } }, { "kind": "method", "name": "#getValidationMessage", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "flags", "type": { "text": "ValidityStateFlags" } }, { "name": "currentLength", "type": { "text": "number" } } ] }, { "kind": "method", "name": "handler", "parameters": [ { "name": "e", "type": { "text": "InputEvent" } } ], "type": { "text": "handler(e: InputEvent) => void" } }, { "kind": "method", "name": "#redispatch", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "description": "See:\n - https://github.com/warp-ds/elements/issues/722\n - https://github.com/lit/lit-element/issues/922\n - https://developer.mozilla.org/en-US/docs/Web/API/Event/composed\n - https://pm.dartus.fr/posts/2021/shadow-dom-and-event-propagation/" }, { "kind": "method", "name": "#resize", "privacy": "private", "parameters": [ { "name": "target", "type": { "text": "HTMLTextAreaElement" } } ], "description": "Calculate the new height for the area on input" }, { "kind": "method", "name": "helpTextSlotChange", "type": { "text": "helpTextSlotChange() => void" } } ], "events": [ { "type": {} } ], "attributes": [ { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Keep in mind that using disabled in its current form is an anti-pattern.\n\nThere will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.\n\nPlease consider more informative alternatives before choosing to use disabled on an element.", "summary": "Makes the element not focusable and hides it from form submits", "fieldName": "disabled" }, { "name": "invalid", "type": { "text": "boolean" }, "default": "false", "description": "Mark the form field as invalid.\n\nMake sure to also set a `help-text` to help users fix the validation problem.", "fieldName": "invalid" }, { "name": "label", "type": { "text": "string | undefined" }, "description": "Either a `label` or an `aria-label` must be provided.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string | undefined" }, "description": "Use in combination with `invalid` to show as a validation error message,\nor on its own to show a help text.", "summary": "Description shown below the input field", "fieldName": "helpText" }, { "name": "maximum-rows", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "fieldName": "maxRows" }, { "name": "minimum-rows", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of text rows the textarea should display", "fieldName": "minRows" }, { "name": "maxlength", "type": { "text": "number | undefined" }, "description": "Sets the maximum number of text rows before the content starts scrolling.", "fieldName": "maxLength" }, { "name": "minlength", "type": { "text": "number | undefined" }, "description": "Sets the minimum number of characters for the textarea to be valid", "fieldName": "minLength" }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form", "fieldName": "name" }, { "name": "placeholder", "type": { "text": "string | undefined" }, "description": "Set a text that is shown in the textarea when it doesn't have a value.\n\nPlaceholder text should not be used as a substitute for labeling the element with a visible label.", "summary": "Shown in the textarea when it doesn't have a value", "fieldName": "placeholder" }, { "name": "read-only", "type": { "text": "boolean" }, "default": "false", "deprecated": "Use the native `readonly` attribute instead", "fieldName": "readOnly" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Whether the input can be selected but not changed by the user", "fieldName": "readonly" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Whether user input is required on the input before form submission", "fieldName": "required" }, { "name": "tooltip", "type": { "text": "string | undefined" }, "description": "Supplementary information that should show in a tooltip behind an information icon after the label.\n\nYou must provide a label to be able to show an info icon with a tooltip.", "fieldName": "tooltip" }, { "name": "value", "type": { "text": "string | undefined" }, "description": "Lets you set the current value", "fieldName": "value" }, { "name": "optional", "type": { "text": "boolean" }, "default": "false", "description": "Show an icon behind the label indicating the field is optional", "fieldName": "optional" } ], "mixins": [ { "name": "FormControlMixin", "package": "@open-wc/form-control" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "w-textarea", "customElement": true, "modulePath": "packages/textarea/textarea.ts", "definitionPath": "packages/textarea/textarea.ts" } ], "exports": [ { "kind": "custom-element-definition", "name": "w-textarea", "declaration": { "name": "WarpTextarea", "module": "packages/textarea/textarea.ts" } }, { "kind": "js", "name": "WarpTextarea", "declaration": { "name": "WarpTextarea", "module": "packages/textarea/textarea.ts" } } ] }, { "kind": "javascript-module", "path": "packages/toast/toast.ts", "declarations": [], "exports": [ { "kind": "js", "name": "removeToast", "declaration": { "name": "removeToast", "module": "./api.js" } }, { "kind": "js", "name": "toast", "declaration": { "name": "toast", "module": "./api.js" } }, { "kind": "js", "name": "updateToast", "declaration": { "name": "updateToast", "module": "./api.js" } } ] }, { "kind": "javascript-module", "path": "packages/toast-container/toast-container.ts", "declarations": [], "exports": [] } ] }