From 73ba3058792f4edf4ef3dc7acbfa6401bbfabce8 Mon Sep 17 00:00:00 2001 From: Tomasz Pluskiewicz Date: Fri, 13 Dec 2024 13:41:43 +0100 Subject: [PATCH] chore: remove ignored files --- dist/storybook/animations/README.md | 72 - dist/storybook/localize/README.md | 244 - dist/storybook/shoelace/README.md | 82 - .../shoelace/cdn/custom-elements.json | 17377 ---------------- .../shoelace/dist/custom-elements.json | 17377 ---------------- 5 files changed, 35152 deletions(-) delete mode 100644 dist/storybook/animations/README.md delete mode 100644 dist/storybook/localize/README.md delete mode 100644 dist/storybook/shoelace/README.md delete mode 100644 dist/storybook/shoelace/cdn/custom-elements.json delete mode 100644 dist/storybook/shoelace/dist/custom-elements.json diff --git a/dist/storybook/animations/README.md b/dist/storybook/animations/README.md deleted file mode 100644 index fccc9815..00000000 --- a/dist/storybook/animations/README.md +++ /dev/null @@ -1,72 +0,0 @@ -# Shoelace Animations - -Your favorite [animate.css](https://animate.style/) effects available as ES modules for use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). - -- 🏆 ~100 quality animations -- 🎾 ~30 popular easings -- 🚚 Works with CDNs -- 🌲 Fully tree-shakeable - -[Try it on JSFiddle](https://jsfiddle.net/claviska/ohjmkgb1) - -This module was built for [Shoelace](https://shoelace.style/), but it works well as a stand-alone library too! - -## Installation - -```bash -npm install @shoelace-style/animations -``` - -## Usage - -Importing all animations: - -```js -import * as animations from '@shoelace-style/animations'; -``` - -Importing individual animations: - -```js -import { bounce } from '@shoelace-style/animations'; -``` - -Importing easings: - -```js -import { easings } from '@shoelace-style/animations'; -``` - -Animating an element: - -```html -
- - -``` - -This example uses the [jsDelivr CDN](https://www.jsdelivr.com/). To import the library locally, install it and make `node_modules/@shoelace-style/animations/dist` available to your app or bundler. - -## Developers - -This script parses all animation stylesheets found in `node_modules/animate.css` and generates [keyframe objects](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) that you can use with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). As animations are tweaked and added to animate.css, the keyframes herein will be kept in sync when rerunning the script. - -To build the project, run: - -```bash -npm run build -``` - -This will purge and rebuild the `dist` directory. - -Please report all bugs and suggestions to [the issue tracker](https://github.com/shoelace-style/animations/issues). diff --git a/dist/storybook/localize/README.md b/dist/storybook/localize/README.md deleted file mode 100644 index 96e05476..00000000 --- a/dist/storybook/localize/README.md +++ /dev/null @@ -1,244 +0,0 @@ -# Shoelace: Localize - -This zero-dependency micro library does not aim to replicate a full-blown localization tool. For that, you should use something like [i18next](https://www.i18next.com/). What this library _does_ do is provide a lightweight, [Reactive Controller](https://lit.dev/docs/composition/controllers/) for sharing and applying translations across one or more custom elements in a component library. - -Reactive Controllers are supported by Lit 2 out of the box, but they're designed to be generic so other libraries can elect to support them either natively or through an adapter. If you're favorite custom element authoring library doesn't support Reactive Controllers yet, consider asking the maintainers to add support for them! - -## Overview - -Here's an example of how this library can be used to create a localized custom element with Lit. - -```ts -import { LocalizeController, registerTranslation } from '@shoelace-style/localize'; - -// Note: translations can also be lazy loaded (see "Registering Translations" below) -import en from '../translations/en'; -import es from '../translations/es'; - -registerTranslation(en, es); - -@customElement('my-element') -export class MyElement extends LitElement { - private localize = new LocalizeController(this); - - @property() lang: string; - - render() { - return html` -

${this.localize.term('hello_world')}

- `; - } -} -``` - -To set the page locale, apply the desired `lang` attribute to the `` element. - -```html - - ... - -``` - -Changes to `` will trigger an update to all localized components automatically. - -## Why this instead of an i18n library? - -It's not uncommon for a custom element to require localization, but implementing it at the component level is challenging. For example, how should we provide a translation for this close button that exists in a custom element's shadow root? - -```html -#shadow-root - -``` - -Typically, custom element authors dance around the problem by exposing attributes or properties for such purposes. - -```html - - ... - -``` - -But this approach offloads the problem to the user so they have to provide every term, every time. It also doesn't scale with more complex components that have more than a handful of terms to be translated. - -This is the use case this library is solving for. It is not intended to solve localization at the framework level. There are much better tools for that. - -## How it works - -To achieve this goal, we lean on HTML’s [`lang`](~https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang~) attribute to determine what language should be used. The default locale is specified by ``, but any localized element can be scoped to a locale by setting its `lang` attribute. This means you can have more than one language per page, if desired. - -```html - - - This element will be English - This element will be Spanish - This element will be French - - -``` - -This library provides a set of tools to localize dates, currencies, numbers, and terms in your custom element library with a minimal footprint. Reactivity is achieved with a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) that listens for `lang` changes on ``. - -By design, `lang` attributes on ancestor elements are ignored. This is for performance reasons, as there isn't an efficient way to detect the "current language" of an arbitrary element. I consider this a gap in the platform and [I've proposed properties](https://github.com/whatwg/html/issues/7039) to make this lookup less expensive. - -Fortunately, the majority of use cases appear to favor a single language per page. However, multiple languages per page are also supported, but you'll need to explicitly set the `lang` attribute on all components whose language differs from the one set in ``. - -## Usage - -First, install the library. - -```bash -npm install @shoelace-style/localize -``` - -Next, follow these steps to localize your components. - -1. Create a translation -2. Register the translation -3. Localize your components - -### Creating a Translation - -All translations must extend the `Translation` type and implement the required meta properties (denoted by a `$` prefix). Additional terms can be implemented as show below. - -```ts -// en.ts -import type { Translation } from '@shoelace-style/localize'; - -const translation: Translation = { - $code: 'en', - $name: 'English', - $dir: 'ltr', - - // Simple terms - upload: 'Upload', - - // Terms with placeholders - greetUser: (name: string) => `Hello, ${name}!`, - - // Plurals - numFilesSelected: (count: number) => { - if (count === 0) return 'No files selected'; - if (count === 1) return '1 file selected'; - return `${count} files selected`; - } -}; - -export default translation; -``` - -### Registering Translations - -Once you've created a translation, you need to register it before use. To register a translation, call the `registerTranslation()` method. This example imports and register two translations up front. - -```ts -import { registerTranslation } from '@shoelace-style/localize'; -import en from './en'; -import es from './es'; - -registerTranslation(en, es); -``` - -The first translation that's registered will be used as the _fallback_. That is, if a term is missing from the target language, the fallback language will be used instead. - -Translations registered with country such as `en-GB` are supported. However, your fallback translation must be registered with only a language code (e.g. `en`) to ensure users of unsupported regions will still receive a comprehensible translation. - -For example, if you're fallback language is `en-US`, you should register it as `en` so users with unsupported `en-*` country codes will receive it as a fallback. Then you can register country codes such as `en-GB` and `en-AU` to improve the experience for additional regions. - -It's important to note that translations _do not_ have to be registered up front. You can register them on demand as the language changes in your app. Upon registration, localized components will update automatically. - -Here's a sample function that dynamically loads a translation. - -```ts -import { registerTranslation } from '@shoelace-style/localize'; - -async function changeLanguage(lang) { - const availableTranslations = ['en', 'es', 'fr', 'de']; - - if (availableTranslations.includes(lang)) { - const translation = await import(`/path/to/translations/${lang}.js`); - registerTranslation(translation); - } -} -``` - -### Localizing Components - -You can use the `LocalizeController` with any library that supports [Lit's Reactive Controller pattern](https://lit.dev/docs/composition/controllers/). In Lit, a localized custom element will look something like this. - -```ts -import { LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { LocalizeController } from '@shoelace-style/localize/dist/lit.js'; - -@customElement('my-element') -export class MyElement extends LitElement { - private localize = new LocalizeController(this); - - // Make sure to make `dir` and `lang` reactive so the component will respond to changes to its own attributes - @property() dir: string; - @property() lang: string; - - render() { - return html` - - ${this.localize.term('hello')} - - - ${this.localize.date('2021-09-15 14:00:00 ET'), { month: 'long', day: 'numeric', year: 'numeric' }} - - - ${this.localize.number(1000, { style: 'currency', currency: 'USD'})} - - - ${this.localize.lang()} - - - ${this.localize.dir()} - `; - } -} -``` - -## Typed Translations and Arguments - -Because translations are defined by the user, there's no way for TypeScript to automatically know about the terms you've defined. This means you won't get strongly typed arguments when calling `this.localize.term()`. However, you can solve this by extending `Translation` and `LocalizeController`. - -In a separate file, e.g. `my-localize.ts`, add the following code. - -```ts -import { LocalizeController as DefaultLocalizeController } from '@shoelace-style/localize'; - -// Extend the default controller with your custom translation -export class LocalizeController extends DefaultLocalizeController {} - -// Export `registerTranslation` so you can import everything from this file -export { registerTranslation } from '@shoelace-style/localize'; - -// Define your translation terms here -export interface MyTranslation extends Translation { - myTerm: string; - myOtherTerm: string; - myTermWithArgs: (count: string) => string; -} -``` - -Now you can import `MyLocalizeController` and get strongly typed translations when you use `this.localize.term()`! - -## Advantages - -- Zero dependencies -- Extremely lightweight -- Supports simple terms, plurals, and complex translations - - Fun fact: some languages have [six plural forms](https://lingohub.com/blog/2019/02/pluralization) and this utility supports that -- Supports dates, numbers, and currencies using built-in [`Intl` APIs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) -- Good DX for custom element authors and consumers - - Intuitive API for custom element authors - - Consumers only need to load the translations they want and set the `lang` attribute -- Translations can be loaded up front or on demand - -## Disadvantages - -- Complex translations require some code, such as conditionals - - This is arguably no more difficult than, for example, adding them to a [YAML](https://edgeguides.rubyonrails.org/i18n.html#pluralization) or [XLIFF](https://en.wikipedia.org/wiki/XLIFF) file diff --git a/dist/storybook/shoelace/README.md b/dist/storybook/shoelace/README.md deleted file mode 100644 index 8e6eed96..00000000 --- a/dist/storybook/shoelace/README.md +++ /dev/null @@ -1,82 +0,0 @@ -# Shoelace - -A forward-thinking library of web components. - -- Works with all frameworks 🧩 -- Works with CDNs 🚛 -- Fully customizable with CSS 🎨 -- Includes an official dark theme 🌛 -- Built with accessibility in mind ♿️ -- Open source 😸 - -Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska). - ---- - -Documentation: [shoelace.style](https://shoelace.style) - -Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace) - -Twitter: [@shoelace_style](https://twitter.com/shoelace_style) - ---- - -## Shoemakers 🥾 - -Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally. - -**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace. - -If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be. - -### What are you using to build Shoelace? - -Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/). - -### Forking the Repo - -Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies. - -```bash -git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace -cd shoelace -npm install -``` - -### Developing - -Once you've cloned the repo, run the following command. - -```bash -npm start -``` - -This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically. - -### Building - -To generate a production build, run the following command. - -```bash -npm run build -``` - -### Creating New Components - -To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name. - -```bash -npm run create sl-tag-name -``` - -This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar. - -### Contributing - -Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first. - -## License - -Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license. - -Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾 diff --git a/dist/storybook/shoelace/cdn/custom-elements.json b/dist/storybook/shoelace/cdn/custom-elements.json deleted file mode 100644 index df331a8c..00000000 --- a/dist/storybook/shoelace/cdn/custom-elements.json +++ /dev/null @@ -1,17377 +0,0 @@ -{ - "schemaVersion": "1.0.0", - "readme": "", - "modules": [ - { - "kind": "javascript-module", - "path": "components/alert/alert.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SlAlert", - "cssParts": [ - { - "description": "The component's base wrapper.", - "name": "base" - }, - { - "description": "The container that wraps the optional icon.", - "name": "icon" - }, - { - "description": "The container that wraps the alert's main content.", - "name": "message" - }, - { - "description": "The close button, an ``.", - "name": "close-button" - }, - { - "description": "The close button's exported `base` part.", - "name": "close-button__base" - } - ], - "slots": [ - { - "description": "The alert's main content.", - "name": "" - }, - { - "description": "An icon to show in the alert. Works best with ``.", - "name": "icon" - } - ], - "members": [ - { - "kind": "field", - "name": "dependencies", - "type": { - "text": "object" - }, - "static": true, - "default": "{ 'sl-icon-button': SlIconButton }" - }, - { - "kind": "field", - "name": "autoHideTimeout", - "type": { - "text": "number" - }, - "privacy": "private" - }, - { - "kind": "field", - "name": "hasSlotController", - "privacy": "private", - "readonly": true, - "default": "new HasSlotController(this, 'icon', 'suffix')" - }, - { - "kind": "field", - "name": "localize", - "privacy": "private", - "readonly": true, - "default": "new LocalizeController(this)" - }, - { - "kind": "field", - "name": "base", - "type": { - "text": "HTMLElement" - } - }, - { - "kind": "field", - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.", - "attribute": "open", - "reflects": true - }, - { - "kind": "field", - "name": "closable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables a close button that allows the user to dismiss the alert.", - "attribute": "closable", - "reflects": true - }, - { - "kind": "field", - "name": "variant", - "type": { - "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'" - }, - "default": "'primary'", - "description": "The alert's theme variant.", - "attribute": "variant", - "reflects": true - }, - { - "kind": "field", - "name": "duration", - "default": "Infinity", - "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.", - "attribute": "duration" - }, - { - "kind": "method", - "name": "restartAutoHide", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleCloseClick", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleMouseMove", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleOpenChange" - }, - { - "kind": "method", - "name": "handleDurationChange" - }, - { - "kind": "method", - "name": "show", - "description": "Shows the alert." - }, - { - "kind": "method", - "name": "hide", - "description": "Hides the alert" - }, - { - "kind": "method", - "name": "toast", - "description": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden." - } - ], - "events": [ - { - "description": "Emitted when the alert opens.", - "name": "sl-show", - "reactName": "onSlShow", - "eventName": "SlShowEvent" - }, - { - "description": "Emitted after the alert opens and all animations are complete.", - "name": "sl-after-show", - "reactName": "onSlAfterShow", - "eventName": "SlAfterShowEvent" - }, - { - "description": "Emitted when the alert closes.", - "name": "sl-hide", - "reactName": "onSlHide", - "eventName": "SlHideEvent" - }, - { - "description": "Emitted after the alert closes and all animations are complete.", - "name": "sl-after-hide", - "reactName": "onSlAfterHide", - "eventName": "SlAfterHideEvent" - } - ], - "attributes": [ - { - "name": "open", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the alert's open state.", - "fieldName": "open" - }, - { - "name": "closable", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Enables a close button that allows the user to dismiss the alert.", - "fieldName": "closable" - }, - { - "name": "variant", - "type": { - "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'" - }, - "default": "'primary'", - "description": "The alert's theme variant.", - "fieldName": "variant" - }, - { - "name": "duration", - "default": "Infinity", - "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.", - "resolveInitializer": { - "module": "src/components/alert/alert.component.ts" - }, - "fieldName": "duration" - } - ], - "superclass": { - "name": "ShoelaceElement", - "module": "/src/internal/shoelace-element.js" - }, - "summary": "Alerts are used to display important messages inline or as toast notifications.", - "tagNameWithoutPrefix": "alert", - "tagName": "sl-alert", - "customElement": true, - "jsDoc": "/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://shoelace.style/components/alert\n * @status stable\n * @since 2.0\n *\n * @dependency sl-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with ``.\n *\n * @event sl-show - Emitted when the alert opens.\n * @event sl-after-show - Emitted after the alert opens and all animations are complete.\n * @event sl-hide - Emitted when the alert closes.\n * @event sl-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an ``.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */", - "documentation": "https://shoelace.style/components/alert", - "status": "stable", - "since": "2.0", - "dependencies": [ - "sl-icon-button" - ], - "animations": [ - { - "name": "alert.show", - "description": "The animation to use when showing the alert." - }, - { - "name": "alert.hide", - "description": "The animation to use when hiding the alert." - } - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SlAlert", - "module": "components/alert/alert.js" - } - } - ] - }, - { - "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": "{\n 'sl-icon': SlIcon\n }" - }, - { - "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" - } - ], - "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 * @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/breadcrumb/breadcrumb.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SlBreadcrumb", - "cssParts": [ - { - "description": "The component's base wrapper.", - "name": "base" - } - ], - "slots": [ - { - "description": "One or more breadcrumb items to display.", - "name": "" - }, - { - "description": "The separator to use between breadcrumb items. Works best with ``.", - "name": "separator" - } - ], - "members": [ - { - "kind": "field", - "name": "dependencies", - "type": { - "text": "object" - }, - "static": true, - "default": "{ 'sl-icon': SlIcon }" - }, - { - "kind": "field", - "name": "localize", - "privacy": "private", - "readonly": true, - "default": "new LocalizeController(this)" - }, - { - "kind": "field", - "name": "separatorDir", - "privacy": "private" - }, - { - "kind": "field", - "name": "defaultSlot", - "type": { - "text": "HTMLSlotElement" - } - }, - { - "kind": "field", - "name": "separatorSlot", - "type": { - "text": "HTMLSlotElement" - } - }, - { - "kind": "field", - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.", - "attribute": "label" - }, - { - "kind": "method", - "name": "getSeparator", - "privacy": "private" - }, - { - "kind": "method", - "name": "handleSlotChange", - "privacy": "private" - } - ], - "attributes": [ - { - "name": "label", - "type": { - "text": "string" - }, - "default": "''", - "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.", - "fieldName": "label" - } - ], - "superclass": { - "name": "ShoelaceElement", - "module": "/src/internal/shoelace-element.js" - }, - "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.", - "tagNameWithoutPrefix": "breadcrumb", - "tagName": "sl-breadcrumb", - "customElement": true, - "jsDoc": "/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://shoelace.style/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with ``.\n *\n * @dependency sl-icon\n *\n * @csspart base - The component's base wrapper.\n */", - "documentation": "https://shoelace.style/components/breadcrumb", - "status": "stable", - "since": "2.0", - "dependencies": [ - "sl-icon" - ] - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SlBreadcrumb", - "module": "components/breadcrumb/breadcrumb.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "components/breadcrumb-item/breadcrumb-item.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SlBreadcrumbItem", - "cssParts": [ - { - "description": "The component's base wrapper.", - "name": "base" - }, - { - "description": "The breadcrumb item's label.", - "name": "label" - }, - { - "description": "The container that wraps the prefix.", - "name": "prefix" - }, - { - "description": "The container that wraps the suffix.", - "name": "suffix" - }, - { - "description": "The container that wraps the separator.", - "name": "separator" - } - ], - "slots": [ - { - "description": "The breadcrumb item's label.", - "name": "" - }, - { - "description": "An optional prefix, usually an icon or icon button.", - "name": "prefix" - }, - { - "description": "An optional suffix, usually an icon or icon button.", - "name": "suffix" - }, - { - "description": "The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `` instead.", - "name": "separator" - } - ], - "members": [ - { - "kind": "field", - "name": "hasSlotController", - "privacy": "private", - "readonly": true, - "default": "new HasSlotController(this, 'prefix', 'suffix')" - }, - { - "kind": "field", - "name": "href", - "type": { - "text": "string | undefined" - }, - "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.", - "attribute": "href" - }, - { - "kind": "field", - "name": "target", - "type": { - "text": "'_blank' | '_parent' | '_self' | '_top' | undefined" - }, - "description": "Tells the browser where to open the link. Only used when `href` is set.", - "attribute": "target" - }, - { - "kind": "field", - "name": "rel", - "type": { - "text": "string" - }, - "default": "'noreferrer noopener'", - "description": "The `rel` attribute to use on the link. Only used when `href` is set.", - "attribute": "rel" - } - ], - "attributes": [ - { - "name": "href", - "type": { - "text": "string | undefined" - }, - "description": "Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\ninternally. When unset, a button will be rendered instead.", - "fieldName": "href" - }, - { - "name": "target", - "type": { - "text": "'_blank' | '_parent' | '_self' | '_top' | undefined" - }, - "description": "Tells the browser where to open the link. Only used when `href` is set.", - "fieldName": "target" - }, - { - "name": "rel", - "type": { - "text": "string" - }, - "default": "'noreferrer noopener'", - "description": "The `rel` attribute to use on the link. Only used when `href` is set.", - "fieldName": "rel" - } - ], - "superclass": { - "name": "ShoelaceElement", - "module": "/src/internal/shoelace-element.js" - }, - "summary": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.", - "tagNameWithoutPrefix": "breadcrumb-item", - "tagName": "sl-breadcrumb-item", - "customElement": true, - "jsDoc": "/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://shoelace.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */", - "documentation": "https://shoelace.style/components/breadcrumb-item", - "status": "stable", - "since": "2.0" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SlBreadcrumbItem", - "module": "components/breadcrumb-item/breadcrumb-item.js" - } - } - ] - }, - { - "kind": "javascript-module", - "path": "components/badge/badge.js", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "SlBadge", - "cssParts": [ - { - "description": "The component's base wrapper.", - "name": "base" - } - ], - "slots": [ - { - "description": "The badge's content.", - "name": "" - } - ], - "members": [ - { - "kind": "field", - "name": "variant", - "type": { - "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'" - }, - "default": "'primary'", - "description": "The badge's theme variant.", - "attribute": "variant", - "reflects": true - }, - { - "kind": "field", - "name": "pill", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Draws a pill-style badge with rounded edges.", - "attribute": "pill", - "reflects": true - }, - { - "kind": "field", - "name": "pulse", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the badge pulsate to draw attention.", - "attribute": "pulse", - "reflects": true - } - ], - "attributes": [ - { - "name": "variant", - "type": { - "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'" - }, - "default": "'primary'", - "description": "The badge's theme variant.", - "fieldName": "variant" - }, - { - "name": "pill", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Draws a pill-style badge with rounded edges.", - "fieldName": "pill" - }, - { - "name": "pulse", - "type": { - "text": "boolean" - }, - "default": "false", - "description": "Makes the badge pulsate to draw attention.", - "fieldName": "pulse" - } - ], - "superclass": { - "name": "ShoelaceElement", - "module": "/src/internal/shoelace-element.js" - }, - "summary": "Badges are used to draw attention and display statuses or counts.", - "tagNameWithoutPrefix": "badge", - "tagName": "sl-badge", - "customElement": true, - "jsDoc": "/**\n * @summary Badges are used to draw attention and display statuses or counts.\n * @documentation https://shoelace.style/components/badge\n * @status stable\n * @since 2.0\n *\n * @slot - The badge's content.\n *\n * @csspart base - The component's base wrapper.\n */", - "documentation": "https://shoelace.style/components/badge", - "status": "stable", - "since": "2.0" - } - ], - "exports": [ - { - "kind": "js", - "name": "default", - "declaration": { - "name": "SlBadge", - "module": "components/badge/badge.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.", - "resolveInitializer": { - "module": "src/components/animation/animation.component.ts" - }, - "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/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": "{\n 'sl-icon': SlIcon,\n 'sl-spinner': SlSpinner\n }" - }, - { - "kind": "field", - "name": "formControlController", - "privacy": "private", - "readonly": true, - "default": "new FormControlController(this, {\n assumeInteractionOn: ['click']\n })" - }, - { - "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`