{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "components/avatar/avatar.js", "declarations": [ { "kind": "class", "description": "", "name": "SlAvatar", "cssProperties": [ { "description": "The size of the avatar.", "name": "--size" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The container that wraps the avatar's icon.", "name": "icon" }, { "description": "The container that wraps the avatar's initials.", "name": "initials" }, { "description": "The avatar image. Only shown when the `image` attribute is set.", "name": "image" } ], "slots": [ { "description": "The default icon to use when no image or initials are present. Works best with ``.", "name": "icon" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'sl-icon': SlIcon }" }, { "kind": "field", "name": "hasError", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "image", "type": { "text": "string" }, "default": "''", "description": "The image source to use for the avatar.", "attribute": "image" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "A label to use to describe the avatar to assistive devices.", "attribute": "label" }, { "kind": "field", "name": "initials", "type": { "text": "string" }, "default": "''", "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).", "attribute": "initials" }, { "kind": "field", "name": "loading", "type": { "text": "'eager' | 'lazy'" }, "default": "'eager'", "description": "Indicates how the browser should load the image.", "attribute": "loading" }, { "kind": "field", "name": "shape", "type": { "text": "'circle' | 'square' | 'rounded'" }, "default": "'circle'", "description": "The shape of the avatar.", "attribute": "shape", "reflects": true }, { "kind": "method", "name": "handleImageChange" }, { "kind": "method", "name": "handleImageLoadError", "privacy": "private" } ], "events": [ { "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.", "name": "sl-error", "reactName": "onSlError", "eventName": "SlErrorEvent" } ], "attributes": [ { "name": "image", "type": { "text": "string" }, "default": "''", "description": "The image source to use for the avatar.", "fieldName": "image" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "A label to use to describe the avatar to assistive devices.", "fieldName": "label" }, { "name": "initials", "type": { "text": "string" }, "default": "''", "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).", "fieldName": "initials" }, { "name": "loading", "type": { "text": "'eager' | 'lazy'" }, "default": "'eager'", "description": "Indicates how the browser should load the image.", "fieldName": "loading" }, { "name": "shape", "type": { "text": "'circle' | 'square' | 'rounded'" }, "default": "'circle'", "description": "The shape of the avatar.", "fieldName": "shape" } ], "superclass": { "name": "ShoelaceElement", "module": "/src/internal/shoelace-element.js" }, "summary": "Avatars are used to represent a person or object.", "tagNameWithoutPrefix": "avatar", "tagName": "sl-avatar", "customElement": true, "jsDoc": "/**\n * @summary Avatars are used to represent a person or object.\n * @documentation https://shoelace.style/components/avatar\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @event sl-error - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some\n * unknown cause.\n *\n * @slot icon - The default icon to use when no image or initials are present. Works best with ``.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the avatar's icon.\n * @csspart initials - The container that wraps the avatar's initials.\n * @csspart image - The avatar image. Only shown when the `image` attribute is set.\n *\n * @cssproperty --size - The size of the avatar.\n */", "documentation": "https://shoelace.style/components/avatar", "status": "stable", "since": "2.0", "dependencies": [ "sl-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "SlAvatar", "module": "components/avatar/avatar.js" } } ] }, { "kind": "javascript-module", "path": "components/animation/animation.js", "declarations": [ { "kind": "class", "description": "", "name": "SlAnimation", "slots": [ { "description": "The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `` elements.", "name": "" } ], "members": [ { "kind": "field", "name": "animation", "type": { "text": "Animation | undefined" }, "privacy": "private" }, { "kind": "field", "name": "hasStarted", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "Promise" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "'none'", "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.", "attribute": "name" }, { "kind": "field", "name": "play", "type": { "text": "boolean" }, "default": "false", "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.", "attribute": "play", "reflects": true }, { "kind": "field", "name": "delay", "type": { "text": "number" }, "default": "0", "description": "The number of milliseconds to delay the start of the animation.", "attribute": "delay" }, { "kind": "field", "name": "direction", "type": { "text": "PlaybackDirection" }, "default": "'normal'", "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)", "attribute": "direction" }, { "kind": "field", "name": "duration", "type": { "text": "number" }, "default": "1000", "description": "The number of milliseconds each iteration of the animation takes to complete.", "attribute": "duration" }, { "kind": "field", "name": "easing", "type": { "text": "string" }, "default": "'linear'", "description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.", "attribute": "easing" }, { "kind": "field", "name": "endDelay", "type": { "text": "number" }, "default": "0", "description": "The number of milliseconds to delay after the active period of an animation sequence.", "attribute": "end-delay" }, { "kind": "field", "name": "fill", "type": { "text": "FillMode" }, "default": "'auto'", "description": "Sets how the animation applies styles to its target before and after its execution.", "attribute": "fill" }, { "kind": "field", "name": "iterations", "default": "Infinity", "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.", "attribute": "iterations" }, { "kind": "field", "name": "iterationStart", "type": { "text": "number" }, "default": "0", "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).", "attribute": "iteration-start" }, { "kind": "field", "name": "keyframes", "type": { "text": "Keyframe[] | undefined" }, "description": "The keyframes to use for the animation. If this is set, `name` will be ignored." }, { "kind": "field", "name": "playbackRate", "type": { "text": "number" }, "default": "1", "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.", "attribute": "playback-rate" }, { "kind": "field", "name": "currentTime", "type": { "text": "CSSNumberish" }, "description": "Gets and sets the current animation time." }, { "kind": "field", "name": "handleAnimationFinish", "privacy": "private" }, { "kind": "field", "name": "handleAnimationCancel", "privacy": "private" }, { "kind": "method", "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", "name": "createAnimation", "privacy": "private" }, { "kind": "method", "name": "destroyAnimation", "privacy": "private" }, { "kind": "method", "name": "handleAnimationChange" }, { "kind": "method", "name": "handlePlayChange" }, { "kind": "method", "name": "handlePlaybackRateChange" }, { "kind": "method", "name": "cancel", "description": "Clears all keyframe effects caused by this animation and aborts its playback." }, { "kind": "method", "name": "finish", "description": "Sets the playback time to the end of the animation corresponding to the current playback direction." } ], "events": [ { "description": "Emitted when the animation is canceled.", "name": "sl-cancel", "reactName": "onSlCancel", "eventName": "SlCancelEvent" }, { "description": "Emitted when the animation finishes.", "name": "sl-finish", "reactName": "onSlFinish", "eventName": "SlFinishEvent" }, { "description": "Emitted when the animation starts or restarts.", "name": "sl-start", "reactName": "onSlStart", "eventName": "SlStartEvent" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "default": "'none'", "description": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop.", "fieldName": "name" }, { "name": "play", "type": { "text": "boolean" }, "default": "false", "description": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled.", "fieldName": "play" }, { "name": "delay", "type": { "text": "number" }, "default": "0", "description": "The number of milliseconds to delay the start of the animation.", "fieldName": "delay" }, { "name": "direction", "type": { "text": "PlaybackDirection" }, "default": "'normal'", "description": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)", "fieldName": "direction" }, { "name": "duration", "type": { "text": "number" }, "default": "1000", "description": "The number of milliseconds each iteration of the animation takes to complete.", "fieldName": "duration" }, { "name": "easing", "type": { "text": "string" }, "default": "'linear'", "description": "The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`.", "fieldName": "easing" }, { "name": "end-delay", "type": { "text": "number" }, "default": "0", "description": "The number of milliseconds to delay after the active period of an animation sequence.", "fieldName": "endDelay" }, { "name": "fill", "type": { "text": "FillMode" }, "default": "'auto'", "description": "Sets how the animation applies styles to its target before and after its execution.", "fieldName": "fill" }, { "name": "iterations", "default": "Infinity", "description": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.", "fieldName": "iterations" }, { "name": "iteration-start", "type": { "text": "number" }, "default": "0", "description": "The offset at which to start the animation, usually between 0 (start) and 1 (end).", "fieldName": "iterationStart" }, { "name": "playback-rate", "type": { "text": "number" }, "default": "1", "description": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart.", "fieldName": "playbackRate" } ], "superclass": { "name": "ShoelaceElement", "module": "/src/internal/shoelace-element.js" }, "summary": "Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).", "tagNameWithoutPrefix": "animation", "tagName": "sl-animation", "customElement": true, "jsDoc": "/**\n * @summary Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n * @documentation https://shoelace.style/components/animation\n * @status stable\n * @since 2.0\n *\n * @event sl-cancel - Emitted when the animation is canceled.\n * @event sl-finish - Emitted when the animation finishes.\n * @event sl-start - Emitted when the animation starts or restarts.\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To\n * animate multiple elements, either wrap them in a single container or use multiple `` elements.\n */", "documentation": "https://shoelace.style/components/animation", "status": "stable", "since": "2.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "SlAnimation", "module": "components/animation/animation.js" } } ] }, { "kind": "javascript-module", "path": "components/dialog/dialog.js", "declarations": [ { "kind": "class", "description": "", "name": "SlDialog", "cssProperties": [ { "description": "The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.", "name": "--width" }, { "description": "The amount of padding to use for the header.", "name": "--header-spacing" }, { "description": "The amount of padding to use for the body.", "name": "--body-spacing" }, { "description": "The amount of padding to use for the footer.", "name": "--footer-spacing" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The overlay that covers the screen behind the dialog.", "name": "overlay" }, { "description": "The dialog's panel (where the dialog and its content are rendered).", "name": "panel" }, { "description": "The dialog's header. This element wraps the title and header actions.", "name": "header" }, { "description": "Optional actions to add to the header. Works best with ``.", "name": "header-actions" }, { "description": "The dialog's title.", "name": "title" }, { "description": "The close button, an ``.", "name": "close-button" }, { "description": "The close button's exported `base` part.", "name": "close-button__base" }, { "description": "The dialog's body.", "name": "body" }, { "description": "The dialog's footer.", "name": "footer" } ], "slots": [ { "description": "The dialog's main content.", "name": "" }, { "description": "The dialog's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Optional actions to add to the header. Works best with ``.", "name": "header-actions" }, { "description": "The dialog's footer, usually one or more buttons representing various options.", "name": "footer" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'sl-icon-button': SlIconButton }" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'footer')" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "originalTrigger", "type": { "text": "HTMLElement | null" }, "privacy": "private" }, { "kind": "field", "name": "modal", "privacy": "public", "default": "new Modal(this)", "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping." }, { "kind": "field", "name": "closeWatcher", "type": { "text": "CloseWatcher | null" }, "privacy": "private" }, { "kind": "field", "name": "dialog", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "panel", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "overlay", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.", "attribute": "open", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "noHeader", "type": { "text": "boolean" }, "default": "false", "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.", "attribute": "no-header", "reflects": true }, { "kind": "method", "name": "requestClose", "privacy": "private", "parameters": [ { "name": "source", "type": { "text": "'close-button' | 'keyboard' | 'overlay'" } } ] }, { "kind": "method", "name": "addOpenListeners", "privacy": "private" }, { "kind": "method", "name": "removeOpenListeners", "privacy": "private" }, { "kind": "field", "name": "handleDocumentKeyDown", "privacy": "private" }, { "kind": "method", "name": "handleOpenChange" }, { "kind": "method", "name": "show", "description": "Shows the dialog." }, { "kind": "method", "name": "hide", "description": "Hides the dialog" } ], "events": [ { "description": "Emitted when the dialog opens.", "name": "sl-show", "reactName": "onSlShow", "eventName": "SlShowEvent" }, { "description": "Emitted after the dialog opens and all animations are complete.", "name": "sl-after-show", "reactName": "onSlAfterShow", "eventName": "SlAfterShowEvent" }, { "description": "Emitted when the dialog closes.", "name": "sl-hide", "reactName": "onSlHide", "eventName": "SlHideEvent" }, { "description": "Emitted after the dialog closes and all animations are complete.", "name": "sl-after-hide", "reactName": "onSlAfterHide", "eventName": "SlAfterHideEvent" }, { "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.", "name": "sl-initial-focus", "reactName": "onSlInitialFocus", "eventName": "SlInitialFocusEvent" }, { "type": { "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }" }, "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.", "name": "sl-request-close", "reactName": "onSlRequestClose", "eventName": "SlRequestCloseEvent" } ], "attributes": [ { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.", "fieldName": "open" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "no-header", "type": { "text": "boolean" }, "default": "false", "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.", "fieldName": "noHeader" } ], "superclass": { "name": "ShoelaceElement", "module": "/src/internal/shoelace-element.js" }, "summary": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.", "tagNameWithoutPrefix": "dialog", "tagName": "sl-dialog", "customElement": true, "jsDoc": "/**\n * @summary Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n * @documentation https://shoelace.style/components/dialog\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The dialog's main content.\n * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with ``.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @event sl-show - Emitted when the dialog opens.\n * @event sl-after-show - Emitted after the dialog opens and all animations are complete.\n * @event sl-hide - Emitted when the dialog closes.\n * @event sl-after-hide - Emitted after the dialog closes and all animations are complete.\n * @event sl-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sl-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the dialog.\n * @csspart panel - The dialog's panel (where the dialog and its content are rendered).\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with ``.\n * @csspart title - The dialog's title.\n * @csspart close-button - The close button, an ``.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation dialog.show - The animation to use when showing the dialog.\n * @animation dialog.hide - The animation to use when hiding the dialog.\n * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.\n * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.\n * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n * trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */", "documentation": "https://shoelace.style/components/dialog", "status": "stable", "since": "2.0", "dependencies": [ "sl-icon-button" ], "animations": [ { "name": "dialog.show", "description": "The animation to use when showing the dialog." }, { "name": "dialog.hide", "description": "The animation to use when hiding the dialog." }, { "name": "dialog.denyClose", "description": "The animation to use when a request to close the dialog is denied." }, { "name": "dialog.overlay.show", "description": "The animation to use when showing the dialog's overlay." }, { "name": "dialog.overlay.hide", "description": "The animation to use when hiding the dialog's overlay." } ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "SlDialog", "module": "components/dialog/dialog.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/checkbox.js", "declarations": [ { "kind": "class", "description": "", "name": "SlCheckbox", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The square container that wraps the checkbox's checked state.", "name": "control" }, { "description": "Matches the control part when the checkbox is checked.", "name": "control--checked" }, { "description": "Matches the control part when the checkbox is indeterminate.", "name": "control--indeterminate" }, { "description": "The checked icon, an `` element.", "name": "checked-icon" }, { "description": "The indeterminate icon, an `` element.", "name": "indeterminate-icon" }, { "description": "The container that wraps the checkbox's label.", "name": "label" }, { "description": "The help text's wrapper.", "name": "form-control-help-text" } ], "slots": [ { "description": "The checkbox's label.", "name": "" }, { "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'sl-icon': SlIcon }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { value: (control: SlCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: SlCheckbox) => control.defaultChecked, setValue: (control: SlCheckbox, checked: boolean) => (control.checked = checked) })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text')" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "''", "attribute": "title" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value of the checkbox, submitted as a name/value pair with form data.", "attribute": "value" }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the checkbox.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in a checked state.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "attribute": "indeterminate", "reflects": true }, { "kind": "field", "name": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `
` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the checkbox a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.", "attribute": "help-text" }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "handleClick", "privacy": "private" }, { "kind": "method", "name": "handleBlur", "privacy": "private" }, { "kind": "method", "name": "handleInput", "privacy": "private" }, { "kind": "method", "name": "handleInvalid", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleFocus", "privacy": "private" }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleStateChange" }, { "kind": "method", "name": "click", "description": "Simulates a click on the checkbox." }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the checkbox." }, { "kind": "method", "name": "blur", "description": "Removes focus from the checkbox." }, { "kind": "method", "name": "checkValidity", "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string." } ], "events": [ { "description": "Emitted when the checkbox loses focus.", "name": "sl-blur", "reactName": "onSlBlur", "eventName": "SlBlurEvent" }, { "description": "Emitted when the checked state changes.", "name": "sl-change", "reactName": "onSlChange", "eventName": "SlChangeEvent" }, { "description": "Emitted when the checkbox gains focus.", "name": "sl-focus", "reactName": "onSlFocus", "eventName": "SlFocusEvent" }, { "description": "Emitted when the checkbox receives input.", "name": "sl-input", "reactName": "onSlInput", "eventName": "SlInputEvent" }, { "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.", "name": "sl-invalid", "reactName": "onSlInvalid", "eventName": "SlInvalidEvent" } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "default": "''", "fieldName": "title" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "description": "The current value of the checkbox, submitted as a name/value pair with form data.", "fieldName": "value" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox's size.", "fieldName": "size" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the checkbox.", "fieldName": "disabled" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in a checked state.", "fieldName": "checked" }, { "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "fieldName": "indeterminate" }, { "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "fieldName": "form" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the checkbox a required field.", "fieldName": "required" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.", "fieldName": "helpText" } ], "superclass": { "name": "ShoelaceElement", "module": "/src/internal/shoelace-element.js" }, "summary": "Checkboxes allow the user to toggle an option on or off.", "tagNameWithoutPrefix": "checkbox", "tagName": "sl-checkbox", "customElement": true, "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://shoelace.style/components/checkbox\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event sl-blur - Emitted when the checkbox loses focus.\n * @event sl-change - Emitted when the checked state changes.\n * @event sl-focus - Emitted when the checkbox gains focus.\n * @event sl-input - Emitted when the checkbox receives input.\n * @event sl-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */", "documentation": "https://shoelace.style/components/checkbox", "status": "stable", "since": "2.0", "dependencies": [ "sl-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "SlCheckbox", "module": "components/checkbox/checkbox.js" } } ] }, { "kind": "javascript-module", "path": "components/drawer/drawer.js", "declarations": [ { "kind": "class", "description": "", "name": "SlDrawer", "cssProperties": [ { "description": "The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.", "name": "--size" }, { "description": "The amount of padding to use for the header.", "name": "--header-spacing" }, { "description": "The amount of padding to use for the body.", "name": "--body-spacing" }, { "description": "The amount of padding to use for the footer.", "name": "--footer-spacing" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The overlay that covers the screen behind the drawer.", "name": "overlay" }, { "description": "The drawer's panel (where the drawer and its content are rendered).", "name": "panel" }, { "description": "The drawer's header. This element wraps the title and header actions.", "name": "header" }, { "description": "Optional actions to add to the header. Works best with ``.", "name": "header-actions" }, { "description": "The drawer's title.", "name": "title" }, { "description": "The close button, an ``.", "name": "close-button" }, { "description": "The close button's exported `base` part.", "name": "close-button__base" }, { "description": "The drawer's body.", "name": "body" }, { "description": "The drawer's footer.", "name": "footer" } ], "slots": [ { "description": "The drawer's main content.", "name": "" }, { "description": "The drawer's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Optional actions to add to the header. Works best with ``.", "name": "header-actions" }, { "description": "The drawer's footer, usually one or more buttons representing various options.", "name": "footer" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'sl-icon-button': SlIconButton }" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'footer')" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "originalTrigger", "type": { "text": "HTMLElement | null" }, "privacy": "private" }, { "kind": "field", "name": "modal", "privacy": "public", "default": "new Modal(this)", "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping." }, { "kind": "field", "name": "closeWatcher", "type": { "text": "CloseWatcher | null" }, "privacy": "private" }, { "kind": "field", "name": "drawer", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "panel", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "overlay", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.", "attribute": "open", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "placement", "type": { "text": "'top' | 'end' | 'bottom' | 'start'" }, "default": "'end'", "description": "The direction from which the drawer will open.", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.", "attribute": "contained", "reflects": true }, { "kind": "field", "name": "noHeader", "type": { "text": "boolean" }, "default": "false", "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.", "attribute": "no-header", "reflects": true }, { "kind": "method", "name": "requestClose", "privacy": "private", "parameters": [ { "name": "source", "type": { "text": "'close-button' | 'keyboard' | 'overlay'" } } ] }, { "kind": "method", "name": "addOpenListeners", "privacy": "private" }, { "kind": "method", "name": "removeOpenListeners", "privacy": "private" }, { "kind": "field", "name": "handleDocumentKeyDown", "privacy": "private" }, { "kind": "method", "name": "handleOpenChange" }, { "kind": "method", "name": "handleNoModalChange" }, { "kind": "method", "name": "show", "description": "Shows the drawer." }, { "kind": "method", "name": "hide", "description": "Hides the drawer" } ], "events": [ { "description": "Emitted when the drawer opens.", "name": "sl-show", "reactName": "onSlShow", "eventName": "SlShowEvent" }, { "description": "Emitted after the drawer opens and all animations are complete.", "name": "sl-after-show", "reactName": "onSlAfterShow", "eventName": "SlAfterShowEvent" }, { "description": "Emitted when the drawer closes.", "name": "sl-hide", "reactName": "onSlHide", "eventName": "SlHideEvent" }, { "description": "Emitted after the drawer closes and all animations are complete.", "name": "sl-after-hide", "reactName": "onSlAfterHide", "eventName": "SlAfterHideEvent" }, { "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.", "name": "sl-initial-focus", "reactName": "onSlInitialFocus", "eventName": "SlInitialFocusEvent" }, { "type": { "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }" }, "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.", "name": "sl-request-close", "reactName": "onSlRequestClose", "eventName": "SlRequestCloseEvent" } ], "attributes": [ { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.", "fieldName": "open" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "placement", "type": { "text": "'top' | 'end' | 'bottom' | 'start'" }, "default": "'end'", "description": "The direction from which the drawer will open.", "fieldName": "placement" }, { "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.", "fieldName": "contained" }, { "name": "no-header", "type": { "text": "boolean" }, "default": "false", "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.", "fieldName": "noHeader" } ], "superclass": { "name": "ShoelaceElement", "module": "/src/internal/shoelace-element.js" }, "summary": "Drawers slide in from a container to expose additional options and information.", "tagNameWithoutPrefix": "drawer", "tagName": "sl-drawer", "customElement": true, "jsDoc": "/**\n * @summary Drawers slide in from a container to expose additional options and information.\n * @documentation https://shoelace.style/components/drawer\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The drawer's main content.\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.\n * @slot header-actions - Optional actions to add to the header. Works best with ``.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @event sl-show - Emitted when the drawer opens.\n * @event sl-after-show - Emitted after the drawer opens and all animations are complete.\n * @event sl-hide - Emitted when the drawer closes.\n * @event sl-after-hide - Emitted after the drawer closes and all animations are complete.\n * @event sl-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling\n * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} sl-request-close - Emitted when the user attempts to\n * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n * destructive behavior such as data loss.\n *\n * @csspart base - The component's base wrapper.\n * @csspart overlay - The overlay that covers the screen behind the drawer.\n * @csspart panel - The drawer's panel (where the drawer and its content are rendered).\n * @csspart header - The drawer's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with ``.\n * @csspart title - The drawer's title.\n * @csspart close-button - The close button, an ``.\n * @csspart close-button__base - The close button's exported `base` part.\n * @csspart body - The drawer's body.\n * @csspart footer - The drawer's footer.\n *\n * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height\n * depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n *\n * @animation drawer.showTop - The animation to use when showing a drawer with `top` placement.\n * @animation drawer.showEnd - The animation to use when showing a drawer with `end` placement.\n * @animation drawer.showBottom - The animation to use when showing a drawer with `bottom` placement.\n * @animation drawer.showStart - The animation to use when showing a drawer with `start` placement.\n * @animation drawer.hideTop - The animation to use when hiding a drawer with `top` placement.\n * @animation drawer.hideEnd - The animation to use when hiding a drawer with `end` placement.\n * @animation drawer.hideBottom - The animation to use when hiding a drawer with `bottom` placement.\n * @animation drawer.hideStart - The animation to use when hiding a drawer with `start` placement.\n * @animation drawer.denyClose - The animation to use when a request to close the drawer is denied.\n * @animation drawer.overlay.show - The animation to use when showing the drawer's overlay.\n * @animation drawer.overlay.hide - The animation to use when hiding the drawer's overlay.\n *\n * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus\n * trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when\n * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.\n */", "documentation": "https://shoelace.style/components/drawer", "status": "stable", "since": "2.0", "dependencies": [ "sl-icon-button" ], "animations": [ { "name": "drawer.showTop", "description": "The animation to use when showing a drawer with `top` placement." }, { "name": "drawer.showEnd", "description": "The animation to use when showing a drawer with `end` placement." }, { "name": "drawer.showBottom", "description": "The animation to use when showing a drawer with `bottom` placement." }, { "name": "drawer.showStart", "description": "The animation to use when showing a drawer with `start` placement." }, { "name": "drawer.hideTop", "description": "The animation to use when hiding a drawer with `top` placement." }, { "name": "drawer.hideEnd", "description": "The animation to use when hiding a drawer with `end` placement." }, { "name": "drawer.hideBottom", "description": "The animation to use when hiding a drawer with `bottom` placement." }, { "name": "drawer.hideStart", "description": "The animation to use when hiding a drawer with `start` placement." }, { "name": "drawer.denyClose", "description": "The animation to use when a request to close the drawer is denied." }, { "name": "drawer.overlay.show", "description": "The animation to use when showing the drawer's overlay." }, { "name": "drawer.overlay.hide", "description": "The animation to use when hiding the drawer's overlay." } ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "SlDrawer", "module": "components/drawer/drawer.js" } } ] }, { "kind": "javascript-module", "path": "components/button/button.js", "declarations": [ { "kind": "class", "description": "", "name": "SlButton", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The container that wraps the prefix.", "name": "prefix" }, { "description": "The button's label.", "name": "label" }, { "description": "The container that wraps the suffix.", "name": "suffix" }, { "description": "The button's caret icon, an `` element.", "name": "caret" }, { "description": "The spinner that shows when the button is in the loading state.", "name": "spinner" } ], "slots": [ { "description": "The button's label.", "name": "" }, { "description": "A presentational prefix icon or similar element.", "name": "prefix" }, { "description": "A presentational suffix icon or similar element.", "name": "suffix" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['click'] })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement | HTMLLinkElement" } }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "invalid", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "''", "attribute": "title" }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'" }, "default": "'default'", "description": "The button's theme variant.", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The button's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "caret", "type": { "text": "boolean" }, "default": "false", "description": "Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.", "attribute": "caret", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the button.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Draws the button in a loading state.", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "outline", "type": { "text": "boolean" }, "default": "false", "description": "Draws an outlined button.", "attribute": "outline", "reflects": true }, { "kind": "field", "name": "pill", "type": { "text": "boolean" }, "default": "false", "description": "Draws a pill-style button with rounded edges.", "attribute": "pill", "reflects": true }, { "kind": "field", "name": "circle", "type": { "text": "boolean" }, "default": "false", "description": "Draws a circular icon button. When this attribute is present, the button expects a single `` in the\ndefault slot.", "attribute": "circle", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`