From 16f3e256b064aa425a1168e7cbaf9e8dbfa53c6b Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Tue, 1 Aug 2023 19:53:11 +0200 Subject: [PATCH 01/23] feat(clipboard): add new component sl-clipboard (#1473) * feat(clipboard): add new component sl-clipboard * using slots * using a single copyStatus * feat(clipboard): support inputs/textarea/links and shadow dom * fix(clipboard): add area-live to announce copied * feat(clipboard): support any component with a value property --- docs/pages/components/clipboard.md | 241 ++++++++++++++++++ .../clipboard/clipboard.component.ts | 116 +++++++++ src/components/clipboard/clipboard.styles.ts | 54 ++++ src/components/clipboard/clipboard.test.ts | 29 +++ src/components/clipboard/clipboard.ts | 4 + .../tree-item/tree-item.component.ts | 4 +- src/events/events.ts | 2 + src/events/sl-copied.ts | 7 + src/events/sl-copying.ts | 7 + src/shoelace.ts | 1 + 10 files changed, 463 insertions(+), 2 deletions(-) create mode 100644 docs/pages/components/clipboard.md create mode 100644 src/components/clipboard/clipboard.component.ts create mode 100644 src/components/clipboard/clipboard.styles.ts create mode 100644 src/components/clipboard/clipboard.test.ts create mode 100644 src/components/clipboard/clipboard.ts create mode 100644 src/events/sl-copied.ts create mode 100644 src/events/sl-copying.ts diff --git a/docs/pages/components/clipboard.md b/docs/pages/components/clipboard.md new file mode 100644 index 0000000000..08e007db1b --- /dev/null +++ b/docs/pages/components/clipboard.md @@ -0,0 +1,241 @@ +--- +meta: + title: Clipboard + description: Enables you to save content into the clipboard providing visual feedback. +layout: component +--- + +```html:preview +

Clicking the clipboard button will put "shoelace rocks" into your clipboard

+ +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> +

Clicking the clipboard button will put "shoelace rocks" into your clipboard

+ + +); +``` + +## Examples + +### Use your own button + +```html:preview + + + + + +
+ + Copy + Copied + Error + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> + + +
copied
+ + + + Copy + Copied + Error + + +); +``` + +### Get the textValue from a different element + +```html:preview +
+
+
Phone Number
+
+1 234 456789
+
+ +
+ + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const css = ` + dl, .row { + display: flex; + margin: 0; + } +`; + +const App = () => ( + <> +
+
+
Phone Number
+
+1 234 456789
+
+ +
+ + + +); +``` + +### Copy an input/textarea or link + +```html:preview + + +
+ + + +
+ +Shoelace + +
+ + + +
+ + + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> + + +
+ + +
+ Shoelace + + +); +``` + +### Error if copy fails + +For example if a `for` target element is not found or if not using `https`. +An empty string value like `value=""` will also result in an error. + +```html:preview + +
+ + Copy + Copied + Error + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> + + + Copy + Copied + Error + + +); +``` + +### Change duration of reset to copy button + +```html:preview + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> + + +); +``` + +### Supports Shadow Dom + +```html:preview + + + +``` + +```jsx:react +import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + <> + + +); + +customElements.define('sl-copy-demo-el', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + this.shadowRoot.innerHTML = ` +

copy me (inside shadow root)

+ + `; + } +}); +``` + +## Disclaimer + +The public API is partially inspired by https://github.com/github/clipboard-copy-element diff --git a/src/components/clipboard/clipboard.component.ts b/src/components/clipboard/clipboard.component.ts new file mode 100644 index 0000000000..0571020242 --- /dev/null +++ b/src/components/clipboard/clipboard.component.ts @@ -0,0 +1,116 @@ +import { classMap } from 'lit/directives/class-map.js'; +import { html } from 'lit'; +import { property } from 'lit/decorators.js'; +import ShoelaceElement from '../../internal/shoelace-element.js'; +import SlIconButton from '../icon-button/icon-button.component.js'; +import SlTooltip from '../tooltip/tooltip.component.js'; +import styles from './clipboard.styles.js'; +import type { CSSResultGroup } from 'lit'; + +/** + * @summary Enables you to save content into the clipboard providing visual feedback. + * @documentation https://shoelace.style/components/clipboard + * @status experimental + * @since 2.0 + * + * @dependency sl-icon-button + * @dependency sl-tooltip + * + * @event sl-copying - Event when copying starts. + * @event sl-copied - Event when copying finished. + * + * @slot - The content that gets clicked to copy. + * @slot copied - The content shown after a successful copy. + * @slot error - The content shown if an error occurs. + */ +export default class SlClipboard extends ShoelaceElement { + static styles: CSSResultGroup = styles; + static dependencies = { 'sl-tooltip': SlTooltip, 'sl-icon-button': SlIconButton }; + + /** + * Indicates the current status the copy action is in. + */ + @property({ type: String }) copyStatus: 'trigger' | 'copied' | 'error' = 'trigger'; + + /** Value to copy. */ + @property({ type: String }) value = ''; + + /** Id of the element to copy the text value from. */ + @property({ type: String }) for = ''; + + /** Duration in milliseconds to reset to the trigger state. */ + @property({ type: Number, attribute: 'reset-timeout' }) resetTimeout = 2000; + + private handleClick() { + if (this.copyStatus === 'copied') return; + this.copy(); + } + + /** Copies the clipboard */ + async copy() { + if (this.for) { + const root = this.getRootNode() as ShadowRoot | Document; + const target = 'getElementById' in root ? root.getElementById(this.for) : false; + if (target) { + if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) { + this.value = target.value; + } else if (target instanceof HTMLAnchorElement && target.hasAttribute('href')) { + this.value = target.href; + } else if ('value' in target) { + this.value = String(target.value); + } else { + this.value = target.textContent || ''; + } + } + } + if (this.value) { + try { + this.emit('sl-copying'); + await navigator.clipboard.writeText(this.value); + this.emit('sl-copied'); + this.copyStatus = 'copied'; + } catch (error) { + this.copyStatus = 'error'; + } + } else { + this.copyStatus = 'error'; + } + + setTimeout(() => (this.copyStatus = 'trigger'), this.resetTimeout); + } + + render() { + return html` +
+ + + + + + + + + + + + + + + +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'sl-clipboard': SlClipboard; + } +} diff --git a/src/components/clipboard/clipboard.styles.ts b/src/components/clipboard/clipboard.styles.ts new file mode 100644 index 0000000000..e99391b5fa --- /dev/null +++ b/src/components/clipboard/clipboard.styles.ts @@ -0,0 +1,54 @@ +import { css } from 'lit'; +import componentStyles from '../../styles/component.styles.js'; + +export default css` + ${componentStyles} + + :host { + display: inline-block; + } + + /* successful copy */ + slot[name='copied'] { + display: none; + } + .clipboard--copied #default { + display: none; + } + .clipboard--copied slot[name='copied'] { + display: block; + } + + .green::part(base) { + color: var(--sl-color-success-600); + } + .green::part(base):hover, + .green::part(base):focus { + color: var(--sl-color-success-600); + } + .green::part(base):active { + color: var(--sl-color-success-600); + } + + /* failed to copy */ + slot[name='error'] { + display: none; + } + .clipboard--error #default { + display: none; + } + .clipboard--error slot[name='error'] { + display: block; + } + + .red::part(base) { + color: var(--sl-color-danger-600); + } + .red::part(base):hover, + .red::part(base):focus { + color: var(--sl-color-danger-600); + } + .red::part(base):active { + color: var(--sl-color-danger-600); + } +`; diff --git a/src/components/clipboard/clipboard.test.ts b/src/components/clipboard/clipboard.test.ts new file mode 100644 index 0000000000..86093ff453 --- /dev/null +++ b/src/components/clipboard/clipboard.test.ts @@ -0,0 +1,29 @@ +import '../../../dist/shoelace.js'; +import { aTimeout, expect, fixture, html } from '@open-wc/testing'; +import type SlClipboard from './clipboard.js'; + +describe('', () => { + let el: SlClipboard; + + describe('when provided no parameters', () => { + before(async () => { + el = await fixture(html` `); + }); + + it('should pass accessibility tests', async () => { + await expect(el).to.be.accessible(); + }); + + it('should initially be in the trigger status', () => { + expect(el.copyStatus).to.equal('trigger'); + }); + + it('should reset copyStatus after 2 seconds', async () => { + expect(el.copyStatus).to.equal('trigger'); + await el.copy(); // this will result in an error as copy needs to always be called from a user action + expect(el.copyStatus).to.equal('error'); + await aTimeout(2100); + expect(el.copyStatus).to.equal('trigger'); + }); + }); +}); diff --git a/src/components/clipboard/clipboard.ts b/src/components/clipboard/clipboard.ts new file mode 100644 index 0000000000..390f5940c1 --- /dev/null +++ b/src/components/clipboard/clipboard.ts @@ -0,0 +1,4 @@ +import SlClipboard from './clipboard.component.js'; +export * from './clipboard.component.js'; +export default SlClipboard; +SlClipboard.define('sl-clipboard'); diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts index 2fed06ced4..076b009bc8 100644 --- a/src/components/tree-item/tree-item.component.ts +++ b/src/components/tree-item/tree-item.component.ts @@ -12,7 +12,7 @@ import SlCheckbox from '../checkbox/checkbox.component.js'; import SlIcon from '../icon/icon.component.js'; import SlSpinner from '../spinner/spinner.component.js'; import styles from './tree-item.styles.js'; -import type { CSSResultGroup, PropertyValueMap } from 'lit'; +import type { CSSResultGroup, PropertyValues } from 'lit'; /** * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree). @@ -139,7 +139,7 @@ export default class SlTreeItem extends ShoelaceElement { this.isLeaf = !this.lazy && this.getChildrenItems().length === 0; } - protected willUpdate(changedProperties: PropertyValueMap | Map) { + protected willUpdate(changedProperties: PropertyValues | Map) { if (changedProperties.has('selected') && !changedProperties.has('indeterminate')) { this.indeterminate = false; } diff --git a/src/events/events.ts b/src/events/events.ts index 913ee98700..322b9c8d63 100644 --- a/src/events/events.ts +++ b/src/events/events.ts @@ -8,6 +8,8 @@ export type { default as SlChangeEvent } from './sl-change'; export type { default as SlClearEvent } from './sl-clear'; export type { default as SlCloseEvent } from './sl-close'; export type { default as SlCollapseEvent } from './sl-collapse'; +export type { SlCopyingEvent } from './sl-copying'; +export type { SlCopiedEvent } from './sl-copied'; export type { default as SlErrorEvent } from './sl-error'; export type { default as SlExpandEvent } from './sl-expand'; export type { default as SlFinishEvent } from './sl-finish'; diff --git a/src/events/sl-copied.ts b/src/events/sl-copied.ts new file mode 100644 index 0000000000..6293ba8e35 --- /dev/null +++ b/src/events/sl-copied.ts @@ -0,0 +1,7 @@ +export type SlCopiedEvent = CustomEvent>; + +declare global { + interface GlobalEventHandlersEventMap { + 'sl-copied': SlCopiedEvent; + } +} diff --git a/src/events/sl-copying.ts b/src/events/sl-copying.ts new file mode 100644 index 0000000000..33ad22adcc --- /dev/null +++ b/src/events/sl-copying.ts @@ -0,0 +1,7 @@ +export type SlCopyingEvent = CustomEvent>; + +declare global { + interface GlobalEventHandlersEventMap { + 'sl-copying': SlCopyingEvent; + } +} diff --git a/src/shoelace.ts b/src/shoelace.ts index 1fff365fd9..69c2e6478f 100644 --- a/src/shoelace.ts +++ b/src/shoelace.ts @@ -12,6 +12,7 @@ export { default as SlCard } from './components/card/card.js'; export { default as SlCarousel } from './components/carousel/carousel.js'; export { default as SlCarouselItem } from './components/carousel-item/carousel-item.js'; export { default as SlCheckbox } from './components/checkbox/checkbox.js'; +export { default as SlClipboard } from './components/clipboard/clipboard.js'; export { default as SlColorPicker } from './components/color-picker/color-picker.js'; export { default as SlDetails } from './components/details/details.js'; export { default as SlDialog } from './components/dialog/dialog.js'; From 81dfcc2eae1fc3ebee5106d7befd16450985c41d Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 1 Aug 2023 14:04:36 -0400 Subject: [PATCH 02/23] fix treeshaking array (#1480) * fix treeshaking array * fix treeshaking array * imports to not use .component --- custom-elements-manifest.config.js | 2 +- package.json | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 7a41f759a9..d3d1379fdb 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -167,7 +167,7 @@ export default { // const terms = [ { from: /^src\//, to: '' }, // Strip the src/ prefix - { from: /\.(t|j)sx?$/, to: '.js' } // Convert .ts to .js + { from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js ]; mod.path = replace(mod.path, terms); diff --git a/package.json b/package.json index e5d583a607..7c423d108b 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ "./dist/shoelace.js", "./dist/shoelace-autoloader.js", "./dist/components/**/*.js", + "./dist/chunks/**/*.js", "./dist/translations/**/*.*", "./src/translations/**/*.*", + "*.css", "// COMMENT: This monstrosity below isn't perfect, but its like 99% to get bundlers to recognize 'thing.component.ts' as having no side effects. Example: https://regexr.com/7grof", "./dist/components/**/*((? Date: Tue, 1 Aug 2023 14:05:11 -0400 Subject: [PATCH 03/23] fix up/down focus in dropdown; closes #1472 (#1481) --- docs/assets/styles/docs.css | 1 + docs/pages/resources/changelog.md | 4 +++ src/components/dropdown/dropdown.component.ts | 5 +++- src/components/dropdown/dropdown.test.ts | 25 ++++++++++++++++++- 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 2ccb7e4b90..f9d62bdfc5 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -237,6 +237,7 @@ kbd { border: solid 1px var(--sl-color-neutral-200); box-shadow: inset 0 1px 0 0 var(--sl-color-neutral-0), inset 0 -1px 0 0 var(--sl-color-neutral-200); font-family: var(--sl-font-mono); + font-size: 0.9125em; border-radius: var(--docs-border-radius); color: var(--sl-color-neutral-800); padding: 0.125em 0.4em; diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 3698347b45..a8d2a327c5 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,6 +12,10 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). +## Next + +- Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] + ## 2.6.0 - Added JSDoc comments to React Wrappers for better documentation when hovering a component. [#1450] diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts index 9d99d402ee..76ab4feb81 100644 --- a/src/components/dropdown/dropdown.component.ts +++ b/src/components/dropdown/dropdown.component.ts @@ -213,7 +213,7 @@ export default class SlDropdown extends ShoelaceElement { } } - handleTriggerKeyDown(event: KeyboardEvent) { + async handleTriggerKeyDown(event: KeyboardEvent) { // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same // key again to hide the menu in case they don't want to make a selection. if ([' ', 'Enter'].includes(event.key)) { @@ -238,6 +238,9 @@ export default class SlDropdown extends ShoelaceElement { // Show the menu if it's not already open if (!this.open) { this.show(); + + // Wait for the dropdown to open before focusing, but not the animation + await this.updateComplete; } if (menuItems.length > 0) { diff --git a/src/components/dropdown/dropdown.test.ts b/src/components/dropdown/dropdown.test.ts index 36f4d67257..1140ede3c1 100644 --- a/src/components/dropdown/dropdown.test.ts +++ b/src/components/dropdown/dropdown.test.ts @@ -162,7 +162,7 @@ describe('', () => { expect(el.open).to.be.true; }); - it('should open on arrow navigation', async () => { + it('should open on arrow down navigation', async () => { const el = await fixture(html` Toggle @@ -173,12 +173,35 @@ describe('', () => { `); const trigger = el.querySelector('sl-button')!; + const firstMenuItem = el.querySelectorAll('sl-menu-item')[0]; trigger.focus(); await sendKeys({ press: 'ArrowDown' }); await el.updateComplete; expect(el.open).to.be.true; + expect(document.activeElement).to.equal(firstMenuItem); + }); + + it('should open on arrow up navigation', async () => { + const el = await fixture(html` + + Toggle + + Item 1 + Item 2 + + + `); + const trigger = el.querySelector('sl-button')!; + const secondMenuItem = el.querySelectorAll('sl-menu-item')[1]; + + trigger.focus(); + await sendKeys({ press: 'ArrowUp' }); + await el.updateComplete; + + expect(el.open).to.be.true; + expect(document.activeElement).to.equal(secondMenuItem); }); it('should navigate to first focusable item on arrow navigation', async () => { From b7acb27c98ee6aefda2bfb7bf02244ffce54ba60 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 2 Aug 2023 15:35:11 -0400 Subject: [PATCH 04/23] Revert "feat(clipboard): add new component sl-clipboard (#1473)" This reverts commit 16f3e256b064aa425a1168e7cbaf9e8dbfa53c6b. --- docs/pages/components/clipboard.md | 241 ------------------ .../clipboard/clipboard.component.ts | 116 --------- src/components/clipboard/clipboard.styles.ts | 54 ---- src/components/clipboard/clipboard.test.ts | 29 --- src/components/clipboard/clipboard.ts | 4 - .../tree-item/tree-item.component.ts | 4 +- src/events/events.ts | 2 - src/events/sl-copied.ts | 7 - src/events/sl-copying.ts | 7 - src/shoelace.ts | 1 - 10 files changed, 2 insertions(+), 463 deletions(-) delete mode 100644 docs/pages/components/clipboard.md delete mode 100644 src/components/clipboard/clipboard.component.ts delete mode 100644 src/components/clipboard/clipboard.styles.ts delete mode 100644 src/components/clipboard/clipboard.test.ts delete mode 100644 src/components/clipboard/clipboard.ts delete mode 100644 src/events/sl-copied.ts delete mode 100644 src/events/sl-copying.ts diff --git a/docs/pages/components/clipboard.md b/docs/pages/components/clipboard.md deleted file mode 100644 index 08e007db1b..0000000000 --- a/docs/pages/components/clipboard.md +++ /dev/null @@ -1,241 +0,0 @@ ---- -meta: - title: Clipboard - description: Enables you to save content into the clipboard providing visual feedback. -layout: component ---- - -```html:preview -

Clicking the clipboard button will put "shoelace rocks" into your clipboard

- -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> -

Clicking the clipboard button will put "shoelace rocks" into your clipboard

- - -); -``` - -## Examples - -### Use your own button - -```html:preview - - - - - -
- - Copy - Copied - Error - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> - - -
copied
- - - - Copy - Copied - Error - - -); -``` - -### Get the textValue from a different element - -```html:preview -
-
-
Phone Number
-
+1 234 456789
-
- -
- - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const css = ` - dl, .row { - display: flex; - margin: 0; - } -`; - -const App = () => ( - <> -
-
-
Phone Number
-
+1 234 456789
-
- -
- - - -); -``` - -### Copy an input/textarea or link - -```html:preview - - -
- - - -
- -Shoelace - -
- - - -
- - - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> - - -
- - -
- Shoelace - - -); -``` - -### Error if copy fails - -For example if a `for` target element is not found or if not using `https`. -An empty string value like `value=""` will also result in an error. - -```html:preview - -
- - Copy - Copied - Error - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> - - - Copy - Copied - Error - - -); -``` - -### Change duration of reset to copy button - -```html:preview - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> - - -); -``` - -### Supports Shadow Dom - -```html:preview - - - -``` - -```jsx:react -import { SlClipboard } from '@shoelace-style/shoelace/dist/react'; - -const App = () => ( - <> - - -); - -customElements.define('sl-copy-demo-el', class extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: 'open' }); - } - - connectedCallback() { - this.shadowRoot.innerHTML = ` -

copy me (inside shadow root)

- - `; - } -}); -``` - -## Disclaimer - -The public API is partially inspired by https://github.com/github/clipboard-copy-element diff --git a/src/components/clipboard/clipboard.component.ts b/src/components/clipboard/clipboard.component.ts deleted file mode 100644 index 0571020242..0000000000 --- a/src/components/clipboard/clipboard.component.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { classMap } from 'lit/directives/class-map.js'; -import { html } from 'lit'; -import { property } from 'lit/decorators.js'; -import ShoelaceElement from '../../internal/shoelace-element.js'; -import SlIconButton from '../icon-button/icon-button.component.js'; -import SlTooltip from '../tooltip/tooltip.component.js'; -import styles from './clipboard.styles.js'; -import type { CSSResultGroup } from 'lit'; - -/** - * @summary Enables you to save content into the clipboard providing visual feedback. - * @documentation https://shoelace.style/components/clipboard - * @status experimental - * @since 2.0 - * - * @dependency sl-icon-button - * @dependency sl-tooltip - * - * @event sl-copying - Event when copying starts. - * @event sl-copied - Event when copying finished. - * - * @slot - The content that gets clicked to copy. - * @slot copied - The content shown after a successful copy. - * @slot error - The content shown if an error occurs. - */ -export default class SlClipboard extends ShoelaceElement { - static styles: CSSResultGroup = styles; - static dependencies = { 'sl-tooltip': SlTooltip, 'sl-icon-button': SlIconButton }; - - /** - * Indicates the current status the copy action is in. - */ - @property({ type: String }) copyStatus: 'trigger' | 'copied' | 'error' = 'trigger'; - - /** Value to copy. */ - @property({ type: String }) value = ''; - - /** Id of the element to copy the text value from. */ - @property({ type: String }) for = ''; - - /** Duration in milliseconds to reset to the trigger state. */ - @property({ type: Number, attribute: 'reset-timeout' }) resetTimeout = 2000; - - private handleClick() { - if (this.copyStatus === 'copied') return; - this.copy(); - } - - /** Copies the clipboard */ - async copy() { - if (this.for) { - const root = this.getRootNode() as ShadowRoot | Document; - const target = 'getElementById' in root ? root.getElementById(this.for) : false; - if (target) { - if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) { - this.value = target.value; - } else if (target instanceof HTMLAnchorElement && target.hasAttribute('href')) { - this.value = target.href; - } else if ('value' in target) { - this.value = String(target.value); - } else { - this.value = target.textContent || ''; - } - } - } - if (this.value) { - try { - this.emit('sl-copying'); - await navigator.clipboard.writeText(this.value); - this.emit('sl-copied'); - this.copyStatus = 'copied'; - } catch (error) { - this.copyStatus = 'error'; - } - } else { - this.copyStatus = 'error'; - } - - setTimeout(() => (this.copyStatus = 'trigger'), this.resetTimeout); - } - - render() { - return html` -
- - - - - - - - - - - - - - - -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'sl-clipboard': SlClipboard; - } -} diff --git a/src/components/clipboard/clipboard.styles.ts b/src/components/clipboard/clipboard.styles.ts deleted file mode 100644 index e99391b5fa..0000000000 --- a/src/components/clipboard/clipboard.styles.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; - -export default css` - ${componentStyles} - - :host { - display: inline-block; - } - - /* successful copy */ - slot[name='copied'] { - display: none; - } - .clipboard--copied #default { - display: none; - } - .clipboard--copied slot[name='copied'] { - display: block; - } - - .green::part(base) { - color: var(--sl-color-success-600); - } - .green::part(base):hover, - .green::part(base):focus { - color: var(--sl-color-success-600); - } - .green::part(base):active { - color: var(--sl-color-success-600); - } - - /* failed to copy */ - slot[name='error'] { - display: none; - } - .clipboard--error #default { - display: none; - } - .clipboard--error slot[name='error'] { - display: block; - } - - .red::part(base) { - color: var(--sl-color-danger-600); - } - .red::part(base):hover, - .red::part(base):focus { - color: var(--sl-color-danger-600); - } - .red::part(base):active { - color: var(--sl-color-danger-600); - } -`; diff --git a/src/components/clipboard/clipboard.test.ts b/src/components/clipboard/clipboard.test.ts deleted file mode 100644 index 86093ff453..0000000000 --- a/src/components/clipboard/clipboard.test.ts +++ /dev/null @@ -1,29 +0,0 @@ -import '../../../dist/shoelace.js'; -import { aTimeout, expect, fixture, html } from '@open-wc/testing'; -import type SlClipboard from './clipboard.js'; - -describe('', () => { - let el: SlClipboard; - - describe('when provided no parameters', () => { - before(async () => { - el = await fixture(html` `); - }); - - it('should pass accessibility tests', async () => { - await expect(el).to.be.accessible(); - }); - - it('should initially be in the trigger status', () => { - expect(el.copyStatus).to.equal('trigger'); - }); - - it('should reset copyStatus after 2 seconds', async () => { - expect(el.copyStatus).to.equal('trigger'); - await el.copy(); // this will result in an error as copy needs to always be called from a user action - expect(el.copyStatus).to.equal('error'); - await aTimeout(2100); - expect(el.copyStatus).to.equal('trigger'); - }); - }); -}); diff --git a/src/components/clipboard/clipboard.ts b/src/components/clipboard/clipboard.ts deleted file mode 100644 index 390f5940c1..0000000000 --- a/src/components/clipboard/clipboard.ts +++ /dev/null @@ -1,4 +0,0 @@ -import SlClipboard from './clipboard.component.js'; -export * from './clipboard.component.js'; -export default SlClipboard; -SlClipboard.define('sl-clipboard'); diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts index 076b009bc8..2fed06ced4 100644 --- a/src/components/tree-item/tree-item.component.ts +++ b/src/components/tree-item/tree-item.component.ts @@ -12,7 +12,7 @@ import SlCheckbox from '../checkbox/checkbox.component.js'; import SlIcon from '../icon/icon.component.js'; import SlSpinner from '../spinner/spinner.component.js'; import styles from './tree-item.styles.js'; -import type { CSSResultGroup, PropertyValues } from 'lit'; +import type { CSSResultGroup, PropertyValueMap } from 'lit'; /** * @summary A tree item serves as a hierarchical node that lives inside a [tree](/components/tree). @@ -139,7 +139,7 @@ export default class SlTreeItem extends ShoelaceElement { this.isLeaf = !this.lazy && this.getChildrenItems().length === 0; } - protected willUpdate(changedProperties: PropertyValues | Map) { + protected willUpdate(changedProperties: PropertyValueMap | Map) { if (changedProperties.has('selected') && !changedProperties.has('indeterminate')) { this.indeterminate = false; } diff --git a/src/events/events.ts b/src/events/events.ts index 322b9c8d63..913ee98700 100644 --- a/src/events/events.ts +++ b/src/events/events.ts @@ -8,8 +8,6 @@ export type { default as SlChangeEvent } from './sl-change'; export type { default as SlClearEvent } from './sl-clear'; export type { default as SlCloseEvent } from './sl-close'; export type { default as SlCollapseEvent } from './sl-collapse'; -export type { SlCopyingEvent } from './sl-copying'; -export type { SlCopiedEvent } from './sl-copied'; export type { default as SlErrorEvent } from './sl-error'; export type { default as SlExpandEvent } from './sl-expand'; export type { default as SlFinishEvent } from './sl-finish'; diff --git a/src/events/sl-copied.ts b/src/events/sl-copied.ts deleted file mode 100644 index 6293ba8e35..0000000000 --- a/src/events/sl-copied.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type SlCopiedEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'sl-copied': SlCopiedEvent; - } -} diff --git a/src/events/sl-copying.ts b/src/events/sl-copying.ts deleted file mode 100644 index 33ad22adcc..0000000000 --- a/src/events/sl-copying.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type SlCopyingEvent = CustomEvent>; - -declare global { - interface GlobalEventHandlersEventMap { - 'sl-copying': SlCopyingEvent; - } -} diff --git a/src/shoelace.ts b/src/shoelace.ts index 69c2e6478f..1fff365fd9 100644 --- a/src/shoelace.ts +++ b/src/shoelace.ts @@ -12,7 +12,6 @@ export { default as SlCard } from './components/card/card.js'; export { default as SlCarousel } from './components/carousel/carousel.js'; export { default as SlCarouselItem } from './components/carousel-item/carousel-item.js'; export { default as SlCheckbox } from './components/checkbox/checkbox.js'; -export { default as SlClipboard } from './components/clipboard/clipboard.js'; export { default as SlColorPicker } from './components/color-picker/color-picker.js'; export { default as SlDetails } from './components/details/details.js'; export { default as SlDialog } from './components/dialog/dialog.js'; From 8aab94f184f5ef77d5d9f6c4f36370b841dcee42 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 3 Aug 2023 15:27:10 -0400 Subject: [PATCH 05/23] switch skypack to esm.sh to fix react examples --- docs/assets/scripts/code-previews.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js index 135580c698..8963f564f2 100644 --- a/docs/assets/scripts/code-previews.js +++ b/docs/assets/scripts/code-previews.js @@ -1,9 +1,9 @@ (() => { function convertModuleLinks(html) { html = html - .replace(/@shoelace-style\/shoelace/g, `https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}`) - .replace(/from 'react'/g, `from 'https://cdn.skypack.dev/react@${reactVersion}'`) - .replace(/from "react"/g, `from "https://cdn.skypack.dev/react@${reactVersion}"`); + .replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`) + .replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`) + .replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`); return html; } @@ -191,12 +191,12 @@ if (isReact) { htmlTemplate = '
'; jsTemplate = - `import React from 'https://cdn.skypack.dev/react@${reactVersion}';\n` + - `import ReactDOM from 'https://cdn.skypack.dev/react-dom@${reactVersion}';\n` + - `import { setBasePath } from 'https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` + + `import React from 'https://esm.sh/react@${reactVersion}';\n` + + `import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` + + `import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` + `\n` + `// Set the base path for Shoelace assets\n` + - `setBasePath('https://cdn.skypack.dev/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` + + `setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` + `\n${convertModuleLinks(reactExample)}\n` + `\n` + `ReactDOM.render(, document.getElementById('root'));`; From 31ef2f79296a459b716fd5ebb5778cf766b34db0 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Mon, 7 Aug 2023 13:20:34 -0400 Subject: [PATCH 06/23] remove side-effects key, update React docs for cherry-picking (#1485) * remove side-effects, update React docs for cherry-picking * prettier * add PR # * prettier * fix react import paths * Update docs/pages/frameworks/react.md Co-authored-by: Cory LaViska * add colons to imports --------- Co-authored-by: Cory LaViska --- custom-elements-manifest.config.js | 4 +- docs/_includes/component.njk | 2 +- docs/pages/components/alert.md | 19 ++++++--- docs/pages/components/animated-image.md | 8 ++-- docs/pages/components/animation.md | 9 ++-- docs/pages/components/avatar.md | 15 ++++--- docs/pages/components/badge.md | 17 +++++--- docs/pages/components/breadcrumb-item.md | 4 +- docs/pages/components/breadcrumb.md | 17 +++++--- docs/pages/components/button-group.md | 33 +++++++++++---- docs/pages/components/button.md | 28 ++++++------ docs/pages/components/card.md | 15 ++++--- docs/pages/components/carousel-item.md | 3 +- docs/pages/components/carousel.md | 45 ++++++++++++++------ docs/pages/components/checkbox.md | 13 +++--- docs/pages/components/color-picker.md | 14 +++--- docs/pages/components/details.md | 7 +-- docs/pages/components/dialog.md | 20 ++++++--- docs/pages/components/divider.md | 14 +++--- docs/pages/components/drawer.md | 32 +++++++++----- docs/pages/components/dropdown.md | 42 +++++++++++++++--- docs/pages/components/format-bytes.md | 10 +++-- docs/pages/components/format-date.md | 8 ++-- docs/pages/components/format-number.md | 9 ++-- docs/pages/components/icon-button.md | 13 +++--- docs/pages/components/icon.md | 8 ++-- docs/pages/components/image-comparer.md | 4 +- docs/pages/components/include.md | 2 +- docs/pages/components/input.md | 27 ++++++------ docs/pages/components/menu-item.md | 20 ++++++--- docs/pages/components/menu-label.md | 5 ++- docs/pages/components/menu.md | 4 +- docs/pages/components/mutation-observer.md | 6 ++- docs/pages/components/option.md | 6 ++- docs/pages/components/popup.md | 47 +++++++++++++++------ docs/pages/components/progress-bar.md | 12 +++--- docs/pages/components/progress-ring.md | 14 +++--- docs/pages/components/qr-code.md | 11 ++--- docs/pages/components/radio-button.md | 23 +++++++--- docs/pages/components/radio-group.md | 25 ++++++++--- docs/pages/components/radio.md | 11 +++-- docs/pages/components/range.md | 20 ++++----- docs/pages/components/rating.md | 20 ++++----- docs/pages/components/relative-time.md | 8 ++-- docs/pages/components/resize-observer.md | 2 +- docs/pages/components/select.md | 41 ++++++++++++------ docs/pages/components/skeleton.md | 12 +++--- docs/pages/components/spinner.md | 8 ++-- docs/pages/components/split-panel.md | 24 ++++++----- docs/pages/components/switch.md | 10 ++--- docs/pages/components/tab-group.md | 28 +++++++++--- docs/pages/components/tab-panel.md | 4 +- docs/pages/components/tab.md | 2 +- docs/pages/components/tag.md | 8 ++-- docs/pages/components/textarea.md | 20 ++++----- docs/pages/components/tooltip.md | 25 +++++++---- docs/pages/components/tree-item.md | 12 ++++-- docs/pages/components/tree.md | 19 ++++++--- docs/pages/frameworks/react.md | 25 ++++++++--- docs/pages/getting-started/form-controls.md | 16 +++++-- docs/pages/getting-started/installation.md | 2 +- docs/pages/resources/changelog.md | 1 + package.json | 11 ----- scripts/make-react.js | 8 +++- 64 files changed, 611 insertions(+), 341 deletions(-) diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index d3d1379fdb..865579760f 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -53,8 +53,10 @@ export default { return; } - const tagName = 'sl-' + path.basename(importPath, '.component.ts'); + const tagNameWithoutPrefix = path.basename(importPath, '.component.ts'); + const tagName = 'sl-' + tagNameWithoutPrefix; + classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix; classDoc.tagName = tagName; // This used to be set to true by @customElement diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk index 7160d6a706..f340c93fcf 100644 --- a/docs/_includes/component.njk +++ b/docs/_includes/component.njk @@ -84,7 +84,7 @@

To import this component as a React component:

- 
import { {{ component.name }} } from '@shoelace-style/shoelace/{{ meta.npmdir }}/react';
+ 
import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';
diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md index eb9ba05fba..3c93dcebfa 100644 --- a/docs/pages/components/alert.md +++ b/docs/pages/components/alert.md @@ -13,7 +13,8 @@ layout: component ``` ```jsx:react -import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( @@ -74,7 +75,8 @@ Set the `variant` attribute to change the alert's variant. ``` ```jsx:react -import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -144,7 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert. ```jsx:react import { useState } from 'react'; -import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => { const [open, setOpen] = useState(true); @@ -172,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them. ``` ```jsx:react -import { SlAlert } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; const App = () => ( @@ -212,7 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti ```jsx:react import { useState } from 'react'; -import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const css = ` .alert-duration sl-alert { @@ -301,7 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica ```jsx:react import { useRef } from 'react'; -import { SlAlert, SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; function showToast(alert) { alert.toast(); diff --git a/docs/pages/components/animated-image.md b/docs/pages/components/animated-image.md index 67b07b1979..242352be14 100644 --- a/docs/pages/components/animated-image.md +++ b/docs/pages/components/animated-image.md @@ -13,7 +13,7 @@ layout: component ``` ```jsx:react -import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; +import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image'; const App = () => ( ( @@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element. {% raw %} ```jsx:react -import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react'; +import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image'; const App = () => ( ` and set an animation `name`. ``` ```jsx:react -import { SlAnimation } from '@shoelace-style/shoelace/dist/react'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; const css = ` .animation-overview .box { @@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/ ```jsx:react import { useEffect, useRef, useState } from 'react'; -import { SlAnimation } from '@shoelace-style/shoelace/dist/react'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; const css = ` .animation-scroll { @@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/ ``` ```jsx:react -import { SlAnimation } from '@shoelace-style/shoelace/dist/react'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; const css = ` .animation-keyframes .box { @@ -329,7 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init ```jsx:react import { useState } from 'react'; -import { SlAnimation, SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => { const [play, setPlay] = useState(false); diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md index 80df7c2f53..9392f672c3 100644 --- a/docs/pages/components/avatar.md +++ b/docs/pages/components/avatar.md @@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding ``` ```jsx:react -import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; const App = () => ; ``` @@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`. ``` ```jsx:react -import { SlAvatar } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; const App = () => ( ; ``` @@ -85,7 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho ``` ```jsx:react -import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -115,7 +116,8 @@ Avatars can be shaped using the `shape` attribute. ``` ```jsx:react -import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -165,7 +167,8 @@ You can group avatars with a few lines of CSS. ``` ```jsx:react -import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const css = ` .avatar-group sl-avatar:not(:first-of-type) { diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md index 1d8c065372..d65a14469a 100644 --- a/docs/pages/components/badge.md +++ b/docs/pages/components/badge.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlBadge } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; const App = () => Badge; ``` @@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant. ``` ```jsx:react -import { SlBadge } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; const App = () => ( <> @@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges. ``` ```jsx:react -import { SlBadge } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; const App = () => ( <> @@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation ``` ```jsx:react -import { SlBadge } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; const css = ` .badge-pulse sl-badge:not(:last-of-type) { @@ -157,7 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak {% raw %} ```jsx:react -import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -200,7 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're {% raw %} ```jsx:react -import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label'; const App = () => ( ( diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md index 888861f5b5..a827b4930e 100644 --- a/docs/pages/components/breadcrumb.md +++ b/docs/pages/components/breadcrumb.md @@ -17,7 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag ``` ```jsx:react -import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; const App = () => ( @@ -50,7 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc ``` ```jsx:react -import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; const App = () => ( @@ -98,7 +100,8 @@ Use the `separator` slot to change the separator that goes between breadcrumb it ```jsx:react import '@shoelace-style/shoelace/dist/components/icon/icon.js'; -import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; const App = () => ( <> @@ -146,7 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item. ``` ```jsx:react -import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( @@ -176,7 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item. ``` ```jsx:react -import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md index fbba3ae2ac..66c9771b7b 100644 --- a/docs/pages/components/button-group.md +++ b/docs/pages/components/button-group.md @@ -14,7 +14,8 @@ layout: component ``` ```jsx:react -import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; const App = () => ( @@ -56,7 +57,8 @@ All button sizes are supported, but avoid mixing sizes within the same button gr ``` ```jsx:react -import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; const App = () => ( <> @@ -132,7 +134,8 @@ Theme buttons are supported through the button's `variant` attribute. ``` ```jsx:react -import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; const App = () => ( <> @@ -210,7 +213,8 @@ Pill buttons are supported through the button's `pill` attribute. ``` ```jsx:react -import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; const App = () => ( <> @@ -279,7 +283,11 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` ( @@ -320,7 +328,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co ``` ```jsx:react -import { SlButton, SlButtonGroup, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -358,7 +370,9 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact ``` ```jsx:react -import { SlButton, SlButtonGroup, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( <> @@ -427,7 +441,10 @@ Create interactive toolbars with button groups. ``` ```jsx:react -import { SlButton, SlButtonGroup, SlIcon, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const css = ` .button-group-toolbar sl-button-group:not(:last-of-type) { diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index 79494b3b9e..cb68615ac5 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => Button; ``` @@ -31,7 +31,7 @@ Use the `variant` attribute to set the button's variant. ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -56,7 +56,7 @@ Use the `size` attribute to change a button's size. ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -81,7 +81,7 @@ Use the `outline` attribute to draw outlined buttons with transparent background ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -118,7 +118,7 @@ Use the `pill` attribute to give buttons rounded edges. ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -154,7 +154,8 @@ Use the `circle` attribute to create circular icon buttons. When this attribute ``` ```jsx:react -import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -182,7 +183,7 @@ Use the `text` variant to create text buttons that share the same size as regula ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -211,7 +212,7 @@ It's often helpful to have a button that works like a link. This is possible by ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -246,7 +247,7 @@ As expected, buttons can be given a custom width by setting the `width` attribut {% raw %} ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -324,7 +325,8 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -396,7 +398,7 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -427,7 +429,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> @@ -467,7 +469,7 @@ Use the `disabled` attribute to disable a button. ``` ```jsx:react -import { SlButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; const App = () => ( <> diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md index 6899cdd14e..50da4aa55b 100644 --- a/docs/pages/components/card.md +++ b/docs/pages/components/card.md @@ -41,7 +41,9 @@ layout: component ``` ```jsx:react -import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const css = ` .card-overview { @@ -104,7 +106,7 @@ Basic cards aren't very exciting, but they can display any content you want them ``` ```jsx:react -import { SlCard } from '@shoelace-style/shoelace/dist/react'; +import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; const css = ` .card-basic { @@ -159,7 +161,8 @@ Headers can be used to display titles and more. ``` ```jsx:react -import { SlCard, SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const css = ` .card-header { @@ -224,7 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content. ``` ```jsx:react -import { SlButton, SlCard, SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const css = ` .card-footer { @@ -277,7 +282,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches ``` ```jsx:react -import { SlCard } from '@shoelace-style/shoelace/dist/react'; +import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; const css = ` .card-image { diff --git a/docs/pages/components/carousel-item.md b/docs/pages/components/carousel-item.md index 42755baede..17007529d3 100644 --- a/docs/pages/components/carousel-item.md +++ b/docs/pages/components/carousel-item.md @@ -41,7 +41,8 @@ layout: component ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md index 1f102a0c14..ccc6506fb8 100644 --- a/docs/pages/components/carousel.md +++ b/docs/pages/components/carousel.md @@ -41,7 +41,8 @@ layout: component ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( <> @@ -123,7 +124,8 @@ Use the `pagination` attribute to show the total number of slides and the curren ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( @@ -201,7 +203,8 @@ Use the `navigation` attribute to show previous and next buttons. ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( @@ -279,7 +282,8 @@ By default, the carousel will not advanced beyond the first and last slides. You ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( @@ -357,7 +361,8 @@ The carousel will automatically advance when the `autoplay` attribute is used. T ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( @@ -454,7 +459,10 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s ```jsx:react import { useState } from 'react'; -import { SlCarousel, SlCarouselItem, SlDivider, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => { const [isEnabled, setIsEnabled] = useState(false); @@ -522,7 +530,8 @@ The `slides-per-page` attribute makes it possible to display multiple slides at {% raw %} ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const App = () => ( @@ -614,7 +623,8 @@ The content of the carousel can be changed by adding or removing carousel items. ```jsx:react import { useState } from 'react'; -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const css = ` .dynamic-carousel { @@ -730,7 +740,8 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a ``` ```jsx:react -import { SlCarousel, SlCarouselItem } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; const css = ` .vertical { @@ -852,7 +863,11 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's ```jsx:react import { useState } from 'react'; -import { SlCarousel, SlCarouselItem, SlDivider, SlSelect, SlOption } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; const App = () => { const [aspectRatio, setAspectRatio] = useState('3/2'); @@ -956,7 +971,10 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro ```jsx:react import { useState } from 'react'; -import { SlCarousel, SlCarouselItem, SlDivider, SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ( <> @@ -1119,7 +1137,10 @@ The carousel has a robust API that makes it possible to extend and customize. Th ```jsx:react import { useRef } from 'react'; -import { SlCarousel, SlCarouselItem, SlDivider, SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const css = ` .carousel-thumbnails { diff --git a/docs/pages/components/checkbox.md b/docs/pages/components/checkbox.md index af1af5863c..9eef2b8796 100644 --- a/docs/pages/components/checkbox.md +++ b/docs/pages/components/checkbox.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => Checkbox; ``` @@ -30,7 +30,7 @@ Use the `checked` attribute to activate the checkbox. ``` ```jsx:react -import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => Checked; ``` @@ -44,7 +44,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate. ``` ```jsx:react -import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => Indeterminate; ``` @@ -58,7 +58,7 @@ Use the `disabled` attribute to disable the checkbox. ``` ```jsx:react -import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => Disabled; ``` @@ -76,7 +76,7 @@ Use the `size` attribute to change a checkbox's size. ``` ```jsx:react -import { SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => ( <> @@ -127,7 +127,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi ```jsx:react import { useEffect, useRef } from 'react'; -import { SlButton, SlCheckbox } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; const App = () => { const checkbox = useRef(null); diff --git a/docs/pages/components/color-picker.md b/docs/pages/components/color-picker.md index 50fc139e77..2542252457 100644 --- a/docs/pages/components/color-picker.md +++ b/docs/pages/components/color-picker.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `value` attribute to set an initial value for the color picker. ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ; ``` @@ -44,7 +44,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled, ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ; ``` @@ -63,7 +63,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle` ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ( <> @@ -90,7 +90,7 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ( ( <> @@ -134,7 +134,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli ``` ```jsx:react -import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; const App = () => ; ``` diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md index c0da4c425b..765f6f46c5 100644 --- a/docs/pages/components/details.md +++ b/docs/pages/components/details.md @@ -15,7 +15,7 @@ layout: component ``` ```jsx:react -import { SlDetails } from '@shoelace-style/shoelace/dist/react'; +import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; const App = () => ( @@ -39,7 +39,7 @@ Use the `disable` attribute to prevent the details from expanding. ``` ```jsx:react -import { SlDetails } from '@shoelace-style/shoelace/dist/react'; +import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; const App = () => ( @@ -71,7 +71,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ``` ```jsx:react -import { SlDetails, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const css = ` sl-details.custom-icon::part(summary-icon) { diff --git a/docs/pages/components/dialog.md b/docs/pages/components/dialog.md index 718723491c..e26234696e 100644 --- a/docs/pages/components/dialog.md +++ b/docs/pages/components/dialog.md @@ -27,7 +27,8 @@ layout: component ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -75,7 +76,8 @@ Use the `--width` custom property to set the dialog's width. ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -125,7 +127,8 @@ By design, a dialog's height will never exceed that of the viewport. As such, di ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -183,7 +186,9 @@ The header shows a functional close button by default. You can use the `header-a ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog, SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => { const [open, setOpen] = useState(false); @@ -244,7 +249,8 @@ You can use `event.detail.source` to determine what triggered the request to clo ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -296,7 +302,9 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq ```jsx:react import { useState } from 'react'; -import { SlButton, SlDialog, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { const [open, setOpen] = useState(false); diff --git a/docs/pages/components/divider.md b/docs/pages/components/divider.md index a308da5759..ee2b56d2b6 100644 --- a/docs/pages/components/divider.md +++ b/docs/pages/components/divider.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlDivider } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; const App = () => ; ``` @@ -28,7 +28,7 @@ Use the `--width` custom property to change the width of the divider. {% raw %} ```jsx:react -import { SlDivider } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; const App = () => ; ``` @@ -46,7 +46,7 @@ Use the `--color` custom property to change the color of the divider. {% raw %} ```jsx:react -import { SlDivider } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; const App = () => ; ``` @@ -68,7 +68,7 @@ Use the `--spacing` custom property to change the amount of space between the di {% raw %} ```jsx:react -import { SlDivider } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; const App = () => ( <> @@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The {% raw %} ```jsx:react -import { SlDivider } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; const App = () => (
( diff --git a/docs/pages/components/drawer.md b/docs/pages/components/drawer.md index 25a53c3ada..23167ab6eb 100644 --- a/docs/pages/components/drawer.md +++ b/docs/pages/components/drawer.md @@ -27,7 +27,8 @@ layout: component ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -73,7 +74,8 @@ By default, drawers slide in from the end. To make the drawer slide in from the ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -117,7 +119,8 @@ To make the drawer slide in from the top, set the `placement` attribute to `top` ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -161,7 +164,8 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -215,7 +219,8 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -282,7 +287,8 @@ Use the `--size` custom property to set the drawer's size. This will be applied ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -332,7 +338,8 @@ By design, a drawer's height will never exceed 100% of its container. As such, d ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -389,7 +396,9 @@ The header shows a functional close button by default. You can use the `header-a ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer, SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => { const [open, setOpen] = useState(false); @@ -445,7 +454,8 @@ You can use `event.detail.source` to determine what triggered the request to clo ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -497,7 +507,9 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq ```jsx:react import { useState } from 'react'; -import { SlButton, SlDrawer, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { const [open, setOpen] = useState(false); diff --git a/docs/pages/components/dropdown.md b/docs/pages/components/dropdown.md index 236bfa0697..d624f54bf0 100644 --- a/docs/pages/components/dropdown.md +++ b/docs/pages/components/dropdown.md @@ -33,7 +33,12 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a ``` ```jsx:react -import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -93,7 +98,10 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [ ``` ```jsx:react -import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => { function handleSelect(event) { @@ -143,7 +151,10 @@ Alternatively, you can listen for the `click` event on individual menu items. No ``` ```jsx:react -import { SlButton, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => { function handleCut() { @@ -192,7 +203,11 @@ The preferred placement of the dropdown can be set with the `placement` attribut ``` ```jsx:react -import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -230,7 +245,11 @@ The distance from the panel to the trigger can be customized using the `distance ``` ```jsx:react -import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -268,7 +287,11 @@ The offset of the panel along the trigger can be customized using the `skidding` ``` ```jsx:react -import { SlButton, SlDivider, SlDropdown, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -323,7 +346,12 @@ Dropdown panels will be clipped if they're inside a container that has `overflow ``` ```jsx:react -import { SlButton, SlDivider, SlDropdown, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const css = ` .dropdown-hoist { diff --git a/docs/pages/components/format-bytes.md b/docs/pages/components/format-bytes.md index a9e4fb5d85..d9ca846221 100644 --- a/docs/pages/components/format-bytes.md +++ b/docs/pages/components/format-bytes.md @@ -24,7 +24,9 @@ layout: component ```jsx:react import { useState } from 'react'; -import { SlButton, SlFormatBytes, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { const [value, setValue] = useState(1000); @@ -62,7 +64,7 @@ Set the `value` attribute to a number to get the value in bytes. ``` ```jsx:react -import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; const App = () => ( <> @@ -89,7 +91,7 @@ To get the value in bits, set the `unit` attribute to `bit`. ``` ```jsx:react -import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; const App = () => ( <> @@ -116,7 +118,7 @@ Use the `lang` attribute to set the number formatting locale. ``` ```jsx:react -import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; const App = () => ( <> diff --git a/docs/pages/components/format-date.md b/docs/pages/components/format-date.md index 2c42ff2327..2013cca6ac 100644 --- a/docs/pages/components/format-date.md +++ b/docs/pages/components/format-date.md @@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev ``` ```jsx:react -import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; const App = () => ; ``` @@ -51,7 +51,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h ``` ```jsx:react -import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; const App = () => ( <> @@ -91,7 +91,7 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T ``` ```jsx:react -import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; const App = () => ( <> @@ -113,7 +113,7 @@ Russian: ``` ```jsx:react -import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; const App = () => ( <> diff --git a/docs/pages/components/format-number.md b/docs/pages/components/format-number.md index 1675071a7d..2e1a51df18 100644 --- a/docs/pages/components/format-number.md +++ b/docs/pages/components/format-number.md @@ -27,7 +27,8 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel ```jsx:react import { useState } from 'react'; -import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { const [value, setValue] = useState(1000); @@ -66,7 +67,7 @@ To get the value as a percent, set the `type` attribute to `percent`. ``` ```jsx:react -import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; +import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; const App = () => ( <> @@ -94,7 +95,7 @@ Russian: ( <> @@ -120,7 +121,7 @@ To format a number as a monetary value, set the `type` attribute to `currency` a ``` ```jsx:react -import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; +import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number'; const App = () => ( <> diff --git a/docs/pages/components/icon-button.md b/docs/pages/components/icon-button.md index cb9d51e3c3..3cd0475399 100644 --- a/docs/pages/components/icon-button.md +++ b/docs/pages/components/icon-button.md @@ -12,7 +12,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com ``` ```jsx:react -import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => ; ``` @@ -32,7 +32,7 @@ Icon buttons inherit their parent element's `font-size`. {% raw %} ```jsx:react -import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => ( <> @@ -73,7 +73,7 @@ Icon buttons are designed to have a uniform appearance, so their color is not in ``` ```jsx:react -import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const css = ` .icon-button-color sl-icon-button::part(base) { @@ -112,7 +112,7 @@ Use the `href` attribute to convert the button to a link. ``` ```jsx:react -import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => ; ``` @@ -128,7 +128,8 @@ Wrap a tooltip around an icon button to provide contextual information to the us ``` ```jsx:react -import { SlIconButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( @@ -146,7 +147,7 @@ Use the `disabled` attribute to disable the icon button. ``` ```jsx:react -import { SlIconButton } from '@shoelace-style/shoelace/dist/react'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; const App = () => ; ``` diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md index 00effd651f..93d1f27a5c 100644 --- a/docs/pages/components/icon.md +++ b/docs/pages/components/icon.md @@ -70,7 +70,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co {% raw %} ```jsx:react -import { SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( <> @@ -132,7 +132,7 @@ Icons are sized relative to the current font size. To change their size, set the {% raw %} ```jsx:react -import { SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => (
@@ -167,7 +167,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive ``` ```jsx:react -import { SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ; ``` @@ -183,7 +183,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a {% raw %} ```jsx:react -import { SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ; ``` diff --git a/docs/pages/components/image-comparer.md b/docs/pages/components/image-comparer.md index f83fcfde91..d4fe0d1fcb 100644 --- a/docs/pages/components/image-comparer.md +++ b/docs/pages/components/image-comparer.md @@ -23,7 +23,7 @@ For best results, use images that share the same dimensions. The slider can be c ``` ```jsx:react -import { SlImageComparer } from '@shoelace-style/shoelace/dist/react'; +import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer'; const App = () => ( @@ -63,7 +63,7 @@ Use the `position` attribute to set the initial position of the slider. This is ``` ```jsx:react -import { SlImageComparer } from '@shoelace-style/shoelace/dist/react'; +import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer'; const App = () => ( diff --git a/docs/pages/components/include.md b/docs/pages/components/include.md index 601d6187d5..7ef6ef452a 100644 --- a/docs/pages/components/include.md +++ b/docs/pages/components/include.md @@ -14,7 +14,7 @@ The included content will be inserted into the `` element's default ``` ```jsx:react -import { SlInclude } from '@shoelace-style/shoelace/dist/react'; +import SlInclude from '@shoelace-style/shoelace/dist/react/sl-include'; const App = () => ; ``` diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md index a08323d0af..c762d5b30f 100644 --- a/docs/pages/components/input.md +++ b/docs/pages/components/input.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -30,7 +30,8 @@ Use the `label` attribute to give the input an accessible label. For labels that ``` ```jsx:react -import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -44,7 +45,8 @@ Add descriptive help text to an input with the `help-text` attribute. For help t ``` ```jsx:react -import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -58,7 +60,7 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -72,7 +74,7 @@ Add the `clearable` attribute to add a clear button when the input has content. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -86,7 +88,7 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -100,7 +102,7 @@ Add the `filled` attribute to draw a filled input. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -114,7 +116,7 @@ Use the `disabled` attribute to disable an input. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ; ``` @@ -132,7 +134,7 @@ Use the `size` attribute to change an input's size. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ( <> @@ -158,7 +160,7 @@ Use the `pill` attribute to give inputs rounded edges. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ( <> @@ -184,7 +186,7 @@ The `type` attribute controls the type of input the browser renders. ``` ```jsx:react -import { SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ( <> @@ -219,7 +221,8 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => ( <> diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md index d835af6877..81a3e649c9 100644 --- a/docs/pages/components/menu-item.md +++ b/docs/pages/components/menu-item.md @@ -28,7 +28,10 @@ layout: component {% raw %} ```jsx:react -import { SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -72,7 +75,8 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected. {% raw %} ```jsx:react -import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -114,7 +118,11 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s {% raw %} ```jsx:react -import { SlBadge, SlDivider, SlIcon, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -160,7 +168,8 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei {% raw %} ```jsx:react -import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( @@ -209,7 +218,8 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide {% raw %} ```jsx:react -import { SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => { function handleSelect(event) { diff --git a/docs/pages/components/menu-label.md b/docs/pages/components/menu-label.md index 2e8dc32e54..e245f4210e 100644 --- a/docs/pages/components/menu-label.md +++ b/docs/pages/components/menu-label.md @@ -22,7 +22,10 @@ layout: component {% raw %} ```jsx:react -import { SlDivider, SlMenu, SlMenuLabel, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( diff --git a/docs/pages/components/menu.md b/docs/pages/components/menu.md index 9e70c96f19..2bc49fe1f9 100644 --- a/docs/pages/components/menu.md +++ b/docs/pages/components/menu.md @@ -22,7 +22,9 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu- {% raw %} ```jsx:react -import { SlDivider, SlMenu, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => ( diff --git a/docs/pages/components/mutation-observer.md b/docs/pages/components/mutation-observer.md index 818fe27cff..2e62272756 100644 --- a/docs/pages/components/mutation-observer.md +++ b/docs/pages/components/mutation-observer.md @@ -45,7 +45,8 @@ The mutation observer will report changes to the content it wraps through the `s ```jsx:react import { useState } from 'react'; -import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer'; const css = ` .resize-observer-overview div { @@ -146,7 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or ```jsx:react import { useState } from 'react'; -import { SlButton, SlMutationObserver } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer'; const css = ` .mutation-child-list .buttons { diff --git a/docs/pages/components/option.md b/docs/pages/components/option.md index 54b76d0c82..c335beaa84 100644 --- a/docs/pages/components/option.md +++ b/docs/pages/components/option.md @@ -14,7 +14,8 @@ layout: component ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -40,7 +41,8 @@ Use the `disabled` attribute to disable an option and prevent it from being sele ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md index f378a53911..49cc5163a6 100644 --- a/docs/pages/components/popup.md +++ b/docs/pages/components/popup.md @@ -104,7 +104,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSelect, SlMenuItem, SlInput, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-overview sl-popup { @@ -269,7 +273,8 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-active span[slot='anchor'] { @@ -341,7 +346,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your ``` ```jsx:react -import { SlPopup } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; const css = ` #external-anchor { @@ -436,7 +441,9 @@ Since placement is preferred when using `flip`, you can observe the popup's curr ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSelect, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const css = ` .popup-placement span[slot='anchor'] { @@ -538,7 +545,8 @@ Use the `distance` attribute to change the distance between the popup and its an ```jsx:react import { useState } from 'react'; -import { SlPopup, SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const css = ` .popup-distance span[slot='anchor'] { @@ -634,7 +642,8 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off ```jsx:react import { useState } from 'react'; -import { SlPopup, SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const css = ` .popup-skidding span[slot='anchor'] { @@ -777,7 +786,10 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSelect, SlMenuItem, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-arrow sl-popup { @@ -930,7 +942,9 @@ Use the `sync` attribute to make the popup the same width or height as the ancho ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSelect, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const css = ` .popup-sync span[slot='anchor'] { @@ -1041,7 +1055,8 @@ Toggle the switch and scroll the container to see the difference. ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-strategy .overflow { @@ -1149,7 +1164,8 @@ Scroll the container to see how the popup flips to prevent clipping. ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-flip .overflow { @@ -1246,7 +1262,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre ``` ```jsx:react -import { SlPopup } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; const css = ` .popup-flip-fallbacks .overflow { @@ -1342,7 +1358,8 @@ Toggle the switch to see the difference. ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-shift .overflow { @@ -1454,7 +1471,8 @@ Scroll the container to see the popup resize as its available space changes. ```jsx:react import { useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` .popup-auto-size .overflow { @@ -1605,7 +1623,8 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc ```jsx:react import { useRef, useState } from 'react'; -import { SlPopup, SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const css = ` /* If you need to set a z-index, set it on the popup part like this */ diff --git a/docs/pages/components/progress-bar.md b/docs/pages/components/progress-bar.md index 1acf2466b0..b772db33df 100644 --- a/docs/pages/components/progress-bar.md +++ b/docs/pages/components/progress-bar.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; const App = () => ; ``` @@ -26,7 +26,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h ``` ```jsx:react -import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; const App = () => ; ``` @@ -42,7 +42,7 @@ Use the `--height` custom property to set the progress bar's height. {% raw %} ```jsx:react -import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; const App = () => ; ``` @@ -82,7 +82,9 @@ Use the default slot to show a value. ```jsx:react import { useState } from 'react'; -import { SlButton, SlIcon, SlProgressBar } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; const App = () => { const [value, setValue] = useState(50); @@ -121,7 +123,7 @@ The `indeterminate` attribute can be used to inform the user that the operation ``` ```jsx:react -import { SlProgressBar } from '@shoelace-style/shoelace/dist/react'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; const App = () => ; ``` diff --git a/docs/pages/components/progress-ring.md b/docs/pages/components/progress-ring.md index 96305a2a4b..e57c26cc8a 100644 --- a/docs/pages/components/progress-ring.md +++ b/docs/pages/components/progress-ring.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; const App = () => ; ``` @@ -28,7 +28,7 @@ Use the `--size` custom property to set the diameter of the progress ring. {% raw %} ```jsx:react -import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; const App = () => ; ``` @@ -46,7 +46,7 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid {% raw %} ```jsx:react -import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; const App = () => ; ``` @@ -70,7 +70,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop {% raw %} ```jsx:react -import { SlProgressRing } from '@shoelace-style/shoelace/dist/react'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; const App = () => ( ; ``` @@ -134,7 +134,9 @@ Use the default slot to show a label inside the progress ring. ```jsx:react import { useState } from 'react'; -import { SlButton, SlIcon, SlProgressRing } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; const App = () => { const [value, setValue] = useState(50); diff --git a/docs/pages/components/qr-code.md b/docs/pages/components/qr-code.md index 2b1cc9245f..8059442d1d 100644 --- a/docs/pages/components/qr-code.md +++ b/docs/pages/components/qr-code.md @@ -39,7 +39,8 @@ QR codes are useful for providing small pieces of information to users who can q ```jsx:react import { useState } from 'react'; -import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const css = ` .qr-overview { @@ -80,7 +81,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s ``` ```jsx:react -import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; const App = () => ; ``` @@ -94,7 +95,7 @@ Use the `size` attribute to change the size of the QR code. ``` ```jsx:react -import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; const App = () => ; ``` @@ -108,7 +109,7 @@ Create a rounded effect with the `radius` attribute. ``` ```jsx:react -import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; const App = () => ; ``` @@ -135,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q ``` ```jsx:react -import { SlQrCode } from '@shoelace-style/shoelace/dist/react'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; const css = ` .qr-error-correction { diff --git a/docs/pages/components/radio-button.md b/docs/pages/components/radio-button.md index 4257ef174f..101112b2be 100644 --- a/docs/pages/components/radio-button.md +++ b/docs/pages/components/radio-button.md @@ -16,7 +16,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -42,7 +43,8 @@ To set the initial value and checked state, use the `value` attribute on the con ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -66,7 +68,8 @@ Use the `disabled` attribute to disable a radio button. ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -108,7 +111,8 @@ Use the `size` attribute to change a radio button's size. ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -164,7 +168,8 @@ Use the `pill` attribute to give radio buttons rounded edges. ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -216,7 +221,9 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -268,7 +275,9 @@ You can omit button labels and use icons instead. Make sure to set a `label` att ``` ```jsx:react -import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( diff --git a/docs/pages/components/radio-group.md b/docs/pages/components/radio-group.md index d1646a282d..e8cb23c9cb 100644 --- a/docs/pages/components/radio-group.md +++ b/docs/pages/components/radio-group.md @@ -14,7 +14,8 @@ layout: component ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -40,7 +41,8 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -64,7 +66,8 @@ const App = () => ( ``` ```jsx:react -import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -88,7 +91,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -123,7 +127,8 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu ```jsx react import { useState } from 'react'; -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => { const [size, setSize] = useState('medium'); @@ -177,7 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val ``` ```jsx:react -import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => { function handleSubmit(event) { event.preventDefault(); @@ -247,7 +255,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi ```jsx:react import { useEffect, useRef } from 'react'; -import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => { const radioGroup = useRef(null); const errorMessage = 'You must choose this option'; diff --git a/docs/pages/components/radio.md b/docs/pages/components/radio.md index d99ab8c99c..03dcb7fd67 100644 --- a/docs/pages/components/radio.md +++ b/docs/pages/components/radio.md @@ -16,7 +16,8 @@ Radios are designed to be used with [radio groups](/components/radio-group). ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -46,7 +47,8 @@ To set the initial value and checked state, use the `value` attribute on the con ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -70,7 +72,8 @@ Use the `disabled` attribute to disable a radio. ``` ```jsx:react -import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; const App = () => ( @@ -112,7 +115,7 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change ``` ```jsx react -import { SlRadio } from '@shoelace-style/shoelace/dist/react'; +import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; const App = () => ( <> diff --git a/docs/pages/components/range.md b/docs/pages/components/range.md index 2de518b863..6584c3fee3 100644 --- a/docs/pages/components/range.md +++ b/docs/pages/components/range.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `label` attribute to give the range an accessible label. For labels that ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -44,7 +44,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -58,7 +58,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -72,7 +72,7 @@ Use the `disabled` attribute to disable a slider. ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -86,7 +86,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -100,7 +100,7 @@ To disable the tooltip, set `tooltip` to `none`. ``` ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ; ``` @@ -121,7 +121,7 @@ You can customize the active and inactive portions of the track using the `--tra {% raw %} ```jsx:react -import { SlRange } from '@shoelace-style/shoelace/dist/react'; +import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; const App = () => ( ( `Total - ${value}%`} />; ``` diff --git a/docs/pages/components/rating.md b/docs/pages/components/rating.md index 255bc5c060..7c7bfe4f63 100644 --- a/docs/pages/components/rating.md +++ b/docs/pages/components/rating.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -26,7 +26,7 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -40,7 +40,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max` ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -54,7 +54,7 @@ Use the `precision` attribute to let users select fractional ratings. ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -70,7 +70,7 @@ Set the `--symbol-size` custom property to adjust the size. {% raw %} ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -86,7 +86,7 @@ Use the `readonly` attribute to display a rating that users can't change. ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -100,7 +100,7 @@ Use the `disable` attribute to disable the rating. ``` ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ; ``` @@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert ```jsx:react import { useState } from 'react'; -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent']; const css = ` @@ -214,7 +214,7 @@ You can provide custom icons by passing a function to the `getSymbol` property. {% raw %} ```jsx:react -import { SlRating } from '@shoelace-style/shoelace/dist/react'; +import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; const App = () => ( ; ``` @@ -44,7 +44,7 @@ Use the `sync` attribute to update the displayed value automatically as time pas ``` ```jsx:react -import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react'; +import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time'; const date = new Date(new Date().getTime() - 60000); @@ -62,7 +62,7 @@ You can change how the time is displayed using the `format` attribute. Note that ``` ```jsx:react -import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react'; +import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time'; const App = () => ( <> @@ -88,7 +88,7 @@ Russian: ( <> diff --git a/docs/pages/components/resize-observer.md b/docs/pages/components/resize-observer.md index 9fc72494e1..f22431e08e 100644 --- a/docs/pages/components/resize-observer.md +++ b/docs/pages/components/resize-observer.md @@ -36,7 +36,7 @@ The resize observer will report changes to the dimensions of the elements it wra ``` ```jsx:react -import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react'; +import SlResizeObserver from '@shoelace-style/shoelace/dist/react/sl-resize-observer'; const css = ` .resize-observer-overview div { diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 07a917f6fd..5e66276b66 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -17,7 +17,8 @@ layout: component ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -50,7 +51,8 @@ Use the `label` attribute to give the select an accessible label. For labels tha ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -74,7 +76,8 @@ Add descriptive help text to a select with the `help-text` attribute. For help t ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -98,7 +101,8 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -122,7 +126,8 @@ Use the `clearable` attribute to make the control clearable. The clear button on ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -146,7 +151,8 @@ Add the `filled` attribute to draw a filled select. ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -170,7 +176,8 @@ Use the `pill` attribute to give selects rounded edges. ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -194,7 +201,8 @@ Use the `disabled` attribute to disable a select. ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -221,7 +229,8 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -253,7 +262,9 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u ``` ```jsx:react -import { SlDivider, SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -283,7 +294,8 @@ Use `` to group listbox items visually. You can also use `` t ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( @@ -326,7 +338,8 @@ Use the `size` attribute to change a select's size. Note that size does not appl ``` ```jsx:react -import { SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( <> @@ -410,7 +423,9 @@ Use the `prefix` slot to prepend an icon to the control. ``` ```jsx:react -import { SlIcon, SlOption, SlSelect } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; const App = () => ( <> diff --git a/docs/pages/components/skeleton.md b/docs/pages/components/skeleton.md index ccaa7a1d77..c92236fc6f 100644 --- a/docs/pages/components/skeleton.md +++ b/docs/pages/components/skeleton.md @@ -56,7 +56,7 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi ``` ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-overview header { @@ -139,7 +139,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s ``` ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-effects { @@ -200,7 +200,7 @@ Use multiple skeletons and some clever styles to simulate paragraphs. ``` ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-paragraphs sl-skeleton { @@ -265,7 +265,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel ``` ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-avatars sl-skeleton { @@ -360,7 +360,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl ``` ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-shapes sl-skeleton { @@ -423,7 +423,7 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's {% raw %} ```jsx:react -import { SlSkeleton } from '@shoelace-style/shoelace/dist/react'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; const css = ` .skeleton-avatars sl-skeleton { diff --git a/docs/pages/components/spinner.md b/docs/pages/components/spinner.md index 82353aec46..bded59fde2 100644 --- a/docs/pages/components/spinner.md +++ b/docs/pages/components/spinner.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; const App = () => ; ``` @@ -30,7 +30,7 @@ Spinners are sized based on the current font size. To change their size, set the {% raw %} ```jsx:react -import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; const App = () => ( <> @@ -54,7 +54,7 @@ The width of the spinner's track can be changed by setting the `--track-width` c {% raw %} ```jsx:react -import { SlSpinner } from '@shoelace-style/shoelace/dist/react'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; const App = () => ( ( ( @@ -106,7 +106,7 @@ To set the initial position in pixels instead of a percentage, use the `position {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const App = () => ( @@ -164,7 +164,7 @@ Add the `vertical` attribute to render the split panel in a vertical orientation {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const App = () => ( @@ -252,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const css = ` .split-panel-snapping { @@ -344,7 +344,7 @@ Add the `disabled` attribute to prevent the divider from being repositioned. {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const App = () => ( @@ -421,7 +421,9 @@ Try resizing the example below with each option and notice how the panels respon ```jsx:react import { useState } from 'react'; -import { SlSplitPanel, SlSelect, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; const App = () => { const [primary, setPrimary] = useState(''); @@ -498,7 +500,7 @@ This examples demonstrates how you can ensure both panels are at least 150px usi {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const App = () => ( @@ -566,7 +568,7 @@ Create complex layouts that can be repositioned independently by nesting split p {% raw %} ```jsx:react -import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; const App = () => ( @@ -641,7 +643,8 @@ You can target the `divider` part to apply CSS properties to the divider. To add {% raw %} ```jsx:react -import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const App = () => ( @@ -728,7 +731,8 @@ Here's a more elaborate example that changes the divider's color and width and a {% raw %} ```jsx:react -import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; const css = ` .split-panel-divider sl-split-panel { diff --git a/docs/pages/components/switch.md b/docs/pages/components/switch.md index 4a33444f05..6839dee684 100644 --- a/docs/pages/components/switch.md +++ b/docs/pages/components/switch.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => Switch; ``` @@ -30,7 +30,7 @@ Use the `checked` attribute to activate the switch. ``` ```jsx:react -import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => Checked; ``` @@ -44,7 +44,7 @@ Use the `disabled` attribute to disable the switch. ``` ```jsx:react -import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => Disabled; ``` @@ -62,7 +62,7 @@ Use the `size` attribute to change a switch's size. ``` ```jsx:react -import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => ( <> @@ -86,7 +86,7 @@ Use the available custom properties to change how the switch is styled. {% raw %} ```jsx:react -import { SlSwitch } from '@shoelace-style/shoelace/dist/react'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; const App = () => ( ( @@ -68,7 +70,9 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`. ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( @@ -112,7 +116,9 @@ Tabs can be shown on the starting side by setting `placement` to `start`. ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( @@ -156,7 +162,9 @@ Tabs can be shown on the ending side by setting `placement` to `end`. ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( @@ -218,7 +226,9 @@ Add the `closable` attribute to a tab to show a close button. This example shows ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => { function handleClose(event) { @@ -310,7 +320,9 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( @@ -418,7 +430,9 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( diff --git a/docs/pages/components/tab-panel.md b/docs/pages/components/tab-panel.md index b99572459b..c5849b73e3 100644 --- a/docs/pages/components/tab-panel.md +++ b/docs/pages/components/tab-panel.md @@ -20,7 +20,9 @@ layout: component ``` ```jsx:react -import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; const App = () => ( diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md index 5d8d74d457..4789d09b7c 100644 --- a/docs/pages/components/tab.md +++ b/docs/pages/components/tab.md @@ -13,7 +13,7 @@ layout: component ``` ```jsx:react -import { SlTab } from '@shoelace-style/shoelace/dist/react'; +import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; const App = () => ( <> diff --git a/docs/pages/components/tag.md b/docs/pages/components/tag.md index d4eec84332..d05bf910ba 100644 --- a/docs/pages/components/tag.md +++ b/docs/pages/components/tag.md @@ -14,7 +14,7 @@ layout: component ``` ```jsx:react -import { SlTag } from '@shoelace-style/shoelace/dist/react'; +import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; const App = () => ( <> @@ -40,7 +40,7 @@ Use the `size` attribute to change a tab's size. ``` ```jsx:react -import { SlTag } from '@shoelace-style/shoelace/dist/react'; +import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; const App = () => ( <> @@ -62,7 +62,7 @@ Use the `pill` attribute to give tabs rounded edges. ``` ```jsx:react -import { SlTag } from '@shoelace-style/shoelace/dist/react'; +import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; const App = () => ( <> @@ -108,7 +108,7 @@ Use the `removable` attribute to add a remove button to the tag. ``` ```jsx:react -import { SlTag } from '@shoelace-style/shoelace/dist/react'; +import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; const css = ` .tags-removable sl-tag { diff --git a/docs/pages/components/textarea.md b/docs/pages/components/textarea.md index 4c31cf8d3d..850a76b78d 100644 --- a/docs/pages/components/textarea.md +++ b/docs/pages/components/textarea.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -44,7 +44,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -58,7 +58,7 @@ Use the `rows` attribute to change the number of text rows that get shown. ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -72,7 +72,7 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -86,7 +86,7 @@ Add the `filled` attribute to draw a filled textarea. ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -100,7 +100,7 @@ Use the `disabled` attribute to disable a textarea. ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -118,7 +118,7 @@ Use the `size` attribute to change a textarea's size. ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ( <> @@ -140,7 +140,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` @@ -154,7 +154,7 @@ Textareas will automatically resize to expand to fit their content when `resize` ``` ```jsx:react -import { SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => ; ``` diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md index 0cc4e72d85..abd22d8fff 100644 --- a/docs/pages/components/tooltip.md +++ b/docs/pages/components/tooltip.md @@ -16,7 +16,8 @@ Tooltips use `display: contents` so they won't interfere with how elements are p ``` ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( @@ -125,7 +126,8 @@ Use the `placement` attribute to set the preferred placement of the tooltip. ``` ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const css = ` .tooltip-placement-example { @@ -235,7 +237,8 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of ``` ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( @@ -267,7 +270,9 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t ```jsx:react import { useState } from 'react'; -import { SlAvatar, SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => { const [open, setOpen] = useState(false); @@ -301,7 +306,8 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow {% raw %} ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => (
@@ -339,7 +345,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design ``` ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( @@ -365,7 +372,8 @@ Use the `--max-width` custom property to change the width the tooltip can grow t {% raw %} ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const App = () => ( @@ -402,7 +410,8 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto| ``` ```jsx:react -import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; const css = ` .tooltip-hoist { diff --git a/docs/pages/components/tree-item.md b/docs/pages/components/tree-item.md index 2e3cc95461..d4c30bc884 100644 --- a/docs/pages/components/tree-item.md +++ b/docs/pages/components/tree-item.md @@ -20,7 +20,8 @@ layout: component ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -62,7 +63,8 @@ A tree item can contain other tree items. This allows the node to be expanded or ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -102,7 +104,8 @@ Use the `selected` attribute to select a tree item initially. ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -142,7 +145,8 @@ Use the `expanded` attribute to expand a tree item initially. ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( diff --git a/docs/pages/components/tree.md b/docs/pages/components/tree.md index 23e5011ec0..1e950f3ef1 100644 --- a/docs/pages/components/tree.md +++ b/docs/pages/components/tree.md @@ -37,7 +37,8 @@ layout: component ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -118,7 +119,8 @@ The `selection` attribute lets you change the selection behavior of the tree. ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => { const [selection, setSelection] = useState('single'); @@ -197,7 +199,8 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -265,7 +268,8 @@ If you want to disable this behavior after the first load, simply remove the `la ``` ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => { const [childItems, setChildItems] = useState([]); @@ -340,7 +344,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ```jsx:react -import { SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => ( @@ -424,7 +429,9 @@ Decorative icons can be used before labels to provide hints for each node. ``` ```jsx:react -import { SlIcon, SlTree, SlTreeItem } from '@shoelace-style/shoelace/dist/react'; +import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; const App = () => { return ( diff --git a/docs/pages/frameworks/react.md b/docs/pages/frameworks/react.md index b4a91473cd..86f208efea 100644 --- a/docs/pages/frameworks/react.md +++ b/docs/pages/frameworks/react.md @@ -39,13 +39,28 @@ Now you can start using components! Every Shoelace component is available to import as a React component. Note that we're importing the `` _React component_ instead of the `` _custom element_ in the example below. ```jsx -import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react'; +import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button'; const MyComponent = () => Click me; export default MyComponent; ``` +#### Notes about tree shaking + +Previously, it was recommended to import from a single entrypoint like so: + +```jsx +import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react'; +``` + +However, tree-shaking extra Shoelace components proved to be a challenge. As a result, we now recommend cherry-picking components you want to use, rather than importing from a single entrypoint. + +```diff +- import { SlButton } from '@shoelace-style/shoelace/%NPMDIR%/react'; ++ import SlButton from '@shoelace-style/shoelace/%NPMDIR%/react/button'; +``` + You can find a copy + paste import for each component in the "importing" section of its documentation. ### Event Handling @@ -56,7 +71,7 @@ Here's how you can bind the input's value to a state variable. ```jsx import { useState } from 'react'; -import { SlInput } from '@shoelace-style/shoelace/%NPMDIR%/react'; +import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input'; function MyComponent() { const [value, setValue] = useState(''); @@ -71,7 +86,7 @@ If you're using TypeScript, it's important to note that `event.target` will be a ```tsx import { useState } from 'react'; -import { SlInput } from '@shoelace-style/shoelace/%NPMDIR%/react'; +import SlInput from '@shoelace-style/shoelace/%NPMDIR%/react/input'; import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input'; function MyComponent() { @@ -87,7 +102,7 @@ You can also import the event type for use in your callbacks, shown below. ```tsx import { useCallback, useState } from 'react'; -import { SlInput, SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react'; +import SlInput, { type SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react/input'; import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input'; function MyComponent() { @@ -159,7 +174,7 @@ To fix this, add the following to your `package.json` which tells the transpiler ```js { "jest": { - "transformIgnorePatterns": ["node_modules/?!(@shoelace)"] + "transformIgnorePatterns": ["node_modules/(?!(@shoelace))"] } } ``` diff --git a/docs/pages/getting-started/form-controls.md b/docs/pages/getting-started/form-controls.md index 05ebc9aab6..2574e492fd 100644 --- a/docs/pages/getting-started/form-controls.md +++ b/docs/pages/getting-started/form-controls.md @@ -99,7 +99,12 @@ The form will not be submitted if a required field is incomplete. ``` ```jsx:react -import { SlButton, SlCheckbox, SlInput, SlMenuItem, SlSelect, SlTextarea } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; const App = () => { function handleSubmit(event) { @@ -160,7 +165,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ ``` ```jsx:react -import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { function handleSubmit(event) { @@ -211,7 +217,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur ``` ```jsx:react -import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { function handleSubmit(event) { @@ -272,7 +279,8 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa ```jsx:react import { useRef, useState } from 'react'; -import { SlButton, SlInput } from '@shoelace-style/shoelace/dist/react'; +import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; const App = () => { const input = useRef(null); diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index 2d6af34f1e..8cae5c29ee 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -196,7 +196,7 @@ setBasePath('/path/to/shoelace/%NPMDIR% Component modules include side effects for registration purposes. Because of this, importing directly from `@shoelace-style/shoelace` may result in a larger bundle size than necessary. For optimal tree shaking, always cherry pick, i.e. import components and utilities from their respective files, as shown above. ::: -### Avoiding side-effect imports +### Avoiding auto-registering imports By default, imports to components will auto-register themselves. This may not be ideal in all cases. To import just the component's class without auto-registering it's tag we can do the following: diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index a8d2a327c5..82e54c262a 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -15,6 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] +- Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] ## 2.6.0 diff --git a/package.json b/package.json index 7c423d108b..721e37c1eb 100644 --- a/package.json +++ b/package.json @@ -10,17 +10,6 @@ "type": "module", "types": "dist/shoelace.d.ts", "jsdelivr": "./cdn/shoelace-autoloader.js", - "sideEffects": [ - "./dist/shoelace.js", - "./dist/shoelace-autoloader.js", - "./dist/components/**/*.js", - "./dist/chunks/**/*.js", - "./dist/translations/**/*.*", - "./src/translations/**/*.*", - "*.css", - "// COMMENT: This monstrosity below isn't perfect, but its like 99% to get bundlers to recognize 'thing.component.ts' as having no side effects. Example: https://regexr.com/7grof", - "./dist/components/**/*((? { const tagWithoutPrefix = component.tagName.replace(/^sl-/, ''); const componentDir = path.join(reactDir, tagWithoutPrefix); const componentFile = path.join(componentDir, 'index.ts'); - const importPath = component.path; + const importPath = component.path.replace(/\.js$/, '.component.js'); const eventImports = (component.events || []) - .map(event => `import { ${event.eventName} } from '../../../src/events/events';`) + .map(event => `import type { ${event.eventName} } from '../../../src/events/events';`) + .join('\n'); + const eventExports = (component.events || []) + .map(event => `export type { ${event.eventName} } from '../../../src/events/events';`) .join('\n'); const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit-labs/react';` : ``; @@ -46,6 +49,7 @@ components.map(component => { ${eventNameImport} ${eventImports} + ${eventExports} const tagName = '${component.tagName}' From bf15f2fb8af070e7beae332cbecbaadf1a860aa8 Mon Sep 17 00:00:00 2001 From: Tomas Drencak Date: Wed, 9 Aug 2023 21:28:30 +0200 Subject: [PATCH 07/23] Toggle visibility of the clear button (#1496) --- src/components/input/input.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts index 44c9b0df26..6a17cbf50e 100644 --- a/src/components/input/input.component.ts +++ b/src/components/input/input.component.ts @@ -407,7 +407,9 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont const hasLabel = this.label ? true : !!hasLabelSlot; const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; const hasClearIcon = - this.clearable && !this.disabled && !this.readonly && (typeof this.value === 'number' || this.value.length > 0); + this.clearable && !this.disabled && !this.readonly; + const hasClearIconVisible = + hasClearIcon && (typeof this.value === 'number' || this.value.length > 0); return html`
From 5b6c1632bd5f26e5f2cfa287c918927a586a2ca7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 9 Aug 2023 15:38:24 -0400 Subject: [PATCH 08/23] update var names and use stylesheet; #1496 --- src/components/input/input.component.ts | 12 ++++++------ src/components/input/input.styles.ts | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts index 6a17cbf50e..9eca10c53f 100644 --- a/src/components/input/input.component.ts +++ b/src/components/input/input.component.ts @@ -406,10 +406,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont const hasHelpTextSlot = this.hasSlotController.test('help-text'); const hasLabel = this.label ? true : !!hasLabelSlot; const hasHelpText = this.helpText ? true : !!hasHelpTextSlot; - const hasClearIcon = - this.clearable && !this.disabled && !this.readonly; - const hasClearIconVisible = - hasClearIcon && (typeof this.value === 'number' || this.value.length > 0); + const hasClearIcon = this.clearable && !this.disabled && !this.readonly; + const isClearIconVisible = hasClearIcon && (typeof this.value === 'number' || this.value.length > 0); return html`
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 73df571081..105666de49 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -248,6 +248,10 @@ export default css` * Clearable + Password Toggle */ + .input__clear:not(.input__clear--visible) { + visibility: hidden; + } + .input__clear, .input__password-toggle { display: inline-flex; From cb5f6709091c7ff25ad7435a9d5d486479620e4f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 9 Aug 2023 15:40:36 -0400 Subject: [PATCH 09/23] update changelog --- docs/pages/resources/changelog.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 82e54c262a..c70a306b2e 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -15,6 +15,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] +- Improved the behavior of the clear button in `` to prevent the component's width from shifting when toggled [#1496] - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] ## 2.6.0 From 6551a6330b8e75f33019259837c1fb62312a9770 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 9 Aug 2023 16:13:52 -0400 Subject: [PATCH 10/23] remove default assignee --- .github/ISSUE_TEMPLATE/bug_report.md | 3 +-- .github/ISSUE_TEMPLATE/feature_request.md | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 24f8c11d40..a05a514ca1 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -3,8 +3,7 @@ name: Bug Report about: Create a bug report to help us fix a demonstrable problem with code in the library. title: '' labels: bug -assignees: claviska - +assignees: --- ### Describe the bug diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 1f020ff74d..fe22e32471 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -3,8 +3,6 @@ name: Feature Request about: Suggest an idea for this project. title: '' labels: feature -assignees: claviska - --- ### What issue are you having? From b5d800f07ad927ddc58e0310d3f43448b0c0f2f4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 10 Aug 2023 11:29:25 -0400 Subject: [PATCH 11/23] don't wrap code tags in tables --- docs/assets/styles/docs.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f9d62bdfc5..ac1ed3a62b 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -394,6 +394,10 @@ table td p:last-child { overflow-x: auto; } +.table-scroll code { + white-space: nowrap; +} + th.table-name, th.table-event-detail { min-width: 15ch; From 458def78308919d7ed8e4c3c718213164a79877b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 10 Aug 2023 12:59:44 -0400 Subject: [PATCH 12/23] update bootstrap icons and fix license --- docs/pages/resources/changelog.md | 1 + package-lock.json | 26 ++++++++++++++++++-------- package.json | 2 +- scripts/make-icons.js | 2 +- 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index c70a306b2e..b6ee3fe63e 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -17,6 +17,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] - Improved the behavior of the clear button in `` to prevent the component's width from shifting when toggled [#1496] - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] +- Updated Bootstrap Icons to 1.10.5 ## 2.6.0 diff --git a/package-lock.json b/package-lock.json index b2d54ffdc1..89e44da5c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ "@web/test-runner": "^0.15.0", "@web/test-runner-commands": "^0.6.5", "@web/test-runner-playwright": "^0.9.0", - "bootstrap-icons": "^1.10.3", + "bootstrap-icons": "^1.10.5", "browser-sync": "^2.29.3", "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chalk": "^5.2.0", @@ -3987,10 +3987,20 @@ } }, "node_modules/bootstrap-icons": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz", - "integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw==", - "dev": true + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz", + "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ] }, "node_modules/boxen": { "version": "7.0.0", @@ -20196,9 +20206,9 @@ } }, "bootstrap-icons": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz", - "integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw==", + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz", + "integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==", "dev": true }, "boxen": { diff --git a/package.json b/package.json index 721e37c1eb..1142af25be 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@web/test-runner": "^0.15.0", "@web/test-runner-commands": "^0.6.5", "@web/test-runner-playwright": "^0.9.0", - "bootstrap-icons": "^1.10.3", + "bootstrap-icons": "^1.10.5", "browser-sync": "^2.29.3", "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chalk": "^5.2.0", diff --git a/scripts/make-icons.js b/scripts/make-icons.js index e7312c4be7..ff991645e8 100644 --- a/scripts/make-icons.js +++ b/scripts/make-icons.js @@ -32,7 +32,7 @@ await deleteAsync([iconDir]); await fs.mkdir(iconDir, { recursive: true }); await Promise.all([ copy(`${srcPath}/icons`, iconDir), - copy(`${srcPath}/LICENSE.md`, path.join(iconDir, 'LICENSE.md')), + copy(`${srcPath}/LICENSE`, path.join(iconDir, 'LICENSE')), copy(`${srcPath}/bootstrap-icons.svg`, './docs/assets/images/sprite.svg', { overwrite: true }) ]); From c36df5ecc1fae4c630683e5b104b943a47cb8820 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 07:27:34 -0700 Subject: [PATCH 13/23] (#1483) * copy updates * Update docs/pages/components/copy.md Co-authored-by: Thomas Allmer * unwrap and fix case * copy button updates * use bs icon * add parts, hoist, and improve parsing a bit * update docs * remove comment --------- Co-authored-by: Thomas Allmer --- docs/pages/components/copy-button.md | 258 ++++++++++++++++++ docs/pages/components/icon.md | 4 +- docs/pages/resources/changelog.md | 2 + .../copy-button/copy-button.component.ts | 257 +++++++++++++++++ .../copy-button/copy-button.styles.ts | 49 ++++ .../copy-button/copy-button.test.ts | 20 ++ src/components/copy-button/copy-button.ts | 4 + src/components/icon/library.system.ts | 7 +- src/components/tooltip/tooltip.component.ts | 2 - src/components/tooltip/tooltip.styles.ts | 1 + src/events/events.ts | 1 + src/events/sl-copy.ts | 9 + src/shoelace.ts | 1 + src/translations/da.ts | 2 + src/translations/de.ts | 2 + src/translations/en.ts | 2 + src/translations/es.ts | 2 + src/translations/fa.ts | 2 + src/translations/fr.ts | 2 + src/translations/he.ts | 2 + src/translations/hu.ts | 2 + src/translations/ja.ts | 2 + src/translations/nl.ts | 2 + src/translations/pl.ts | 2 + src/translations/pt.ts | 2 + src/translations/ru.ts | 2 + src/translations/sv.ts | 2 + src/translations/tr.ts | 2 + src/translations/zh-tw.ts | 2 + src/utilities/localize.ts | 2 + 30 files changed, 643 insertions(+), 6 deletions(-) create mode 100644 docs/pages/components/copy-button.md create mode 100644 src/components/copy-button/copy-button.component.ts create mode 100644 src/components/copy-button/copy-button.styles.ts create mode 100644 src/components/copy-button/copy-button.test.ts create mode 100644 src/components/copy-button/copy-button.ts create mode 100644 src/events/sl-copy.ts diff --git a/docs/pages/components/copy-button.md b/docs/pages/components/copy-button.md new file mode 100644 index 0000000000..682f92b546 --- /dev/null +++ b/docs/pages/components/copy-button.md @@ -0,0 +1,258 @@ +--- +meta: + title: Copy Button + description: Copies data to the clipboard when the user clicks the button. +layout: component +--- + +```html:preview + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const App = () => ( + +); +``` + +## Examples + +### Custom Labels + +Copy Buttons display feedback in a tooltip. You can customize the labels using the `copy-label`, `success-label`, and `error-label` attributes. + +```html:preview + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const App = () => ( + +); +``` + +### Custom Icons + +Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the icons that get displayed for each state. You can use [``](/components/icon) or your own images. + +```html:preview + + + + + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlIcon } from '@shoelace-style/shoelace/dist/react/sl-icon'; + +const App = () => ( + <> + + + + + + +); +``` + +### Copying Values From Other Elements + +Normally, the data that gets copied will come from the component's `value` attribute, but you can copy data from any element within the same document by providing its `id` to the `from` attribute. + +When using the `from` attribute, the element's [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) will be copied by default. Passing an attribute or property modifier will let you copy data from one of the element's attributes or properties instead. + +To copy data from an attribute, use `from="id[attr]"` where `id` is the id of the target element and `attr` is the name of the attribute you'd like to copy. To copy data from a property, use `from="id.prop"` where `id` is the id of the target element and `prop` is the name of the property you'd like to copy. + +```html:preview + ++1 (234) 456-7890 + + +

+ + + + + +

+ + +Shoelace Website + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input'; + +const App = () => ( + <> + {/* Copies the span's textContent */} + +1 (234) 456-7890 + + +

+ + {/* Copies the input's "value" property */} + + + +

+ + {/* Copies the link's "href" attribute */} + Shoelace Website + + +); +``` + +### Handling Errors + +A copy error will occur if the value is an empty string, if the `from` attribute points to an id that doesn't exist, or if the browser rejects the operation for any reason. When this happens, the `sl-error` event will be emitted. + +This example demonstrates what happens when a copy error occurs. You can customize the error label and icon using the `error-label` attribute and the `error-icon` slot, respectively. + +```html:preview + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const App = () => ( + +); +``` + +### Disabled + +Copy buttons can be disabled by adding the `disabled` attribute. + +```html:preview + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const App = () => ( + +); +``` + +### Changing Feedback Duration + +A success indicator is briefly shown after copying. You can customize the length of time the indicator is shown using the `feedback-duration` attribute. + +```html:preview + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const App = () => ( + +); +``` + +### Custom Styles + +You can customize the button to your liking with CSS. + +```html:preview + + + + + + + +``` + +```jsx:react +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; + +const css = ` + .custom-styles { + --success-color: white; + --error-color: white; + color: white; + } + + .custom-styles::part(button) { + background-color: #ff1493; + border: solid 4px #ff7ac1; + border-right-color: #ad005c; + border-bottom-color: #ad005c; + border-radius: 0; + transition: 100ms scale ease-in-out, 100ms translate ease-in-out; + } + + .custom-styles::part(button):hover { + scale: 1.1; + } + + .custom-styles::part(button):active { + translate: 0 2px; + } + + .custom-styles::part(button):focus-visible { + outline: dashed 2px deeppink; + outline-offset: 4px; + } +`; + +const App = () => ( + <> + + + + +); +``` diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md index 93d1f27a5c..97366c3fa7 100644 --- a/docs/pages/components/icon.md +++ b/docs/pages/components/icon.md @@ -645,9 +645,7 @@ When using sprite sheets, the `sl-load` and `sl-error` events will not fire. ::: :::danger -For security reasons, browsers may apply the same-origin policy on `` elements located in the `` shadow dom and -may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `` elements. -For this reason, sprite sheets should only be used if you're self-hosting them. +For security reasons, browsers may apply the same-origin policy on `` elements located in the `` shadow DOM and may refuse to load a cross-origin URL. There is currently no defined way to set a cross-origin policy for `` elements. For this reason, sprite sheets should only be used if you're self-hosting them. ::: ```html:preview diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index b6ee3fe63e..d5550563e8 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,8 +14,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next +- Added the `` component [#1473] - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] - Improved the behavior of the clear button in `` to prevent the component's width from shifting when toggled [#1496] +- Improved `` to prevent user selection so the tooltip doesn't get highlighted when dragging selections - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] - Updated Bootstrap Icons to 1.10.5 diff --git a/src/components/copy-button/copy-button.component.ts b/src/components/copy-button/copy-button.component.ts new file mode 100644 index 0000000000..fbd8f45041 --- /dev/null +++ b/src/components/copy-button/copy-button.component.ts @@ -0,0 +1,257 @@ +import { classMap } from 'lit/directives/class-map.js'; +import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js'; +import { html } from 'lit'; +import { LocalizeController } from '../../utilities/localize.js'; +import { property, query, state } from 'lit/decorators.js'; +import ShoelaceElement from '../../internal/shoelace-element.js'; +import SlIcon from '../icon/icon.component.js'; +import SlTooltip from '../tooltip/tooltip.component.js'; +import styles from './copy-button.styles.js'; +import type { CSSResultGroup } from 'lit'; + +/** + * @summary Copies text data to the clipboard when the user clicks the trigger. + * @documentation https://shoelace.style/components/copy + * @status experimental + * @since 2.7 + * + * @dependency sl-icon + * @dependency sl-tooltip + * + * @event sl-copy - Emitted when the data has been copied. + * @event sl-error - Emitted when the data could not be copied. + * + * @slot copy-icon - The icon to show in the default copy state. Works best with ``. + * @slot success-icon - The icon to show when the content is copied. Works best with ``. + * @slot error-icon - The icon to show when a copy error occurs. Works best with ``. + * + * @csspart button - The internal ` + + `; + } +} + +setDefaultAnimation('copy.in', { + keyframes: [ + { scale: '.25', opacity: '.25' }, + { scale: '1', opacity: '1' } + ], + options: { duration: 100 } +}); + +setDefaultAnimation('copy.out', { + keyframes: [ + { scale: '1', opacity: '1' }, + { scale: '.25', opacity: '0' } + ], + options: { duration: 100 } +}); + +declare global { + interface HTMLElementTagNameMap { + 'sl-copy-button': SlCopyButton; + } +} diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts new file mode 100644 index 0000000000..29cd4cfb61 --- /dev/null +++ b/src/components/copy-button/copy-button.styles.ts @@ -0,0 +1,49 @@ +import { css } from 'lit'; +import componentStyles from '../../styles/component.styles.js'; + +export default css` + ${componentStyles} + + :host { + --error-color: var(--sl-color-danger-600); + --success-color: var(--sl-color-success-600); + + display: inline-block; + } + + .copy-button__button { + flex: 0 0 auto; + display: flex; + align-items: center; + background: none; + border: none; + border-radius: var(--sl-border-radius-medium); + font-size: inherit; + color: inherit; + padding: var(--sl-spacing-x-small); + cursor: pointer; + transition: var(--sl-transition-x-fast) color; + } + + .copy-button--success .copy-button__button { + color: var(--success-color); + } + + .copy-button--error .copy-button__button { + color: var(--error-color); + } + + .copy-button__button:focus-visible { + outline: var(--sl-focus-ring); + outline-offset: var(--sl-focus-ring-offset); + } + + .copy-button__button[disabled] { + opacity: 0.5; + cursor: not-allowed !important; + } + + slot { + display: inline-flex; + } +`; diff --git a/src/components/copy-button/copy-button.test.ts b/src/components/copy-button/copy-button.test.ts new file mode 100644 index 0000000000..79eb344c17 --- /dev/null +++ b/src/components/copy-button/copy-button.test.ts @@ -0,0 +1,20 @@ +import '../../../dist/shoelace.js'; +import { expect, fixture, html } from '@open-wc/testing'; +import type SlCopyButton from './copy-button.js'; + +// We use aria-live to announce labels via tooltips +const ignoredRules = ['button-name']; + +describe('', () => { + let el: SlCopyButton; + + describe('when provided no parameters', () => { + before(async () => { + el = await fixture(html` `); + }); + + it('should pass accessibility tests', async () => { + await expect(el).to.be.accessible({ ignoredRules }); + }); + }); +}); diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts new file mode 100644 index 0000000000..0283a1e809 --- /dev/null +++ b/src/components/copy-button/copy-button.ts @@ -0,0 +1,4 @@ +import SlCopyButton from './copy-button.component.js'; +export * from './copy-button.component.js'; +export default SlCopyButton; +SlCopyButton.define('sl-copy-button'); diff --git a/src/components/icon/library.system.ts b/src/components/icon/library.system.ts index a0b6ab3ea0..080642e922 100644 --- a/src/components/icon/library.system.ts +++ b/src/components/icon/library.system.ts @@ -16,7 +16,7 @@ const icons = { check: ` - + @@ -40,6 +40,11 @@ const icons = { `, + copy: ` + + + + `, eye: ` diff --git a/src/components/tooltip/tooltip.component.ts b/src/components/tooltip/tooltip.component.ts index cc8fa2ca98..4341f344be 100644 --- a/src/components/tooltip/tooltip.component.ts +++ b/src/components/tooltip/tooltip.component.ts @@ -99,8 +99,6 @@ export default class SlTooltip extends ShoelaceElement { constructor() { super(); - // TODO (justinfagnani): does this need to be done in firstUpdated for some - // reason? If so, document why in a comment. this.addEventListener('blur', this.handleBlur, true); this.addEventListener('focus', this.handleFocus, true); this.addEventListener('click', this.handleClick); diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts index a88bf1f61e..c4d9d6db81 100644 --- a/src/components/tooltip/tooltip.styles.ts +++ b/src/components/tooltip/tooltip.styles.ts @@ -51,5 +51,6 @@ export default css` color: var(--sl-tooltip-color); padding: var(--sl-tooltip-padding); pointer-events: none; + user-select: none; } `; diff --git a/src/events/events.ts b/src/events/events.ts index 913ee98700..739fcd6790 100644 --- a/src/events/events.ts +++ b/src/events/events.ts @@ -8,6 +8,7 @@ export type { default as SlChangeEvent } from './sl-change'; export type { default as SlClearEvent } from './sl-clear'; export type { default as SlCloseEvent } from './sl-close'; export type { default as SlCollapseEvent } from './sl-collapse'; +export type { default as SlCopyEvent } from './sl-copy'; export type { default as SlErrorEvent } from './sl-error'; export type { default as SlExpandEvent } from './sl-expand'; export type { default as SlFinishEvent } from './sl-finish'; diff --git a/src/events/sl-copy.ts b/src/events/sl-copy.ts new file mode 100644 index 0000000000..65e697b593 --- /dev/null +++ b/src/events/sl-copy.ts @@ -0,0 +1,9 @@ +type SlCopyEvent = CustomEvent<{ value: string }>; + +declare global { + interface GlobalEventHandlersEventMap { + 'sl-copy': SlCopyEvent; + } +} + +export default SlCopyEvent; diff --git a/src/shoelace.ts b/src/shoelace.ts index 1fff365fd9..e6660e9d42 100644 --- a/src/shoelace.ts +++ b/src/shoelace.ts @@ -13,6 +13,7 @@ export { default as SlCarousel } from './components/carousel/carousel.js'; export { default as SlCarouselItem } from './components/carousel-item/carousel-item.js'; export { default as SlCheckbox } from './components/checkbox/checkbox.js'; export { default as SlColorPicker } from './components/color-picker/color-picker.js'; +export { default as SlCopyButton } from './components/copy-button/copy-button.js'; export { default as SlDetails } from './components/details/details.js'; export { default as SlDialog } from './components/dialog/dialog.js'; export { default as SlDivider } from './components/divider/divider.js'; diff --git a/src/translations/da.ts b/src/translations/da.ts index e0d459c8c8..3925e68d5d 100644 --- a/src/translations/da.ts +++ b/src/translations/da.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Karrusel', clearEntry: 'Ryd indtastning', close: 'Luk', + copied: 'Kopieret', copy: 'Kopier', currentValue: 'Nuværende værdi', + error: 'Fejl', goToSlide: (slide, count) => `Gå til dias ${slide} af ${count}`, hidePassword: 'Skjul adgangskode', loading: 'Indlæser', diff --git a/src/translations/de.ts b/src/translations/de.ts index 4c1df4fbaf..1894e6006e 100644 --- a/src/translations/de.ts +++ b/src/translations/de.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Karussell', clearEntry: 'Eingabe löschen', close: 'Schließen', + copied: 'Kopiert', copy: 'Kopieren', currentValue: 'Aktueller Wert', + error: 'Fehler', goToSlide: (slide, count) => `Gehen Sie zu Folie ${slide} von ${count}`, hidePassword: 'Passwort verbergen', loading: 'Wird geladen', diff --git a/src/translations/en.ts b/src/translations/en.ts index 86a5e015fb..155cfcfd96 100644 --- a/src/translations/en.ts +++ b/src/translations/en.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Carousel', clearEntry: 'Clear entry', close: 'Close', + copied: 'Copied', copy: 'Copy', currentValue: 'Current value', + error: 'Error', goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`, hidePassword: 'Hide password', loading: 'Loading', diff --git a/src/translations/es.ts b/src/translations/es.ts index d15fdff742..4e94896735 100644 --- a/src/translations/es.ts +++ b/src/translations/es.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Carrusel', clearEntry: 'Borrar entrada', close: 'Cerrar', + copied: 'Copiado', copy: 'Copiar', currentValue: 'Valor actual', + error: 'Error', goToSlide: (slide, count) => `Ir a la diapositiva ${slide} de ${count}`, hidePassword: 'Ocultar contraseña', loading: 'Cargando', diff --git a/src/translations/fa.ts b/src/translations/fa.ts index 2f39bde1a5..6b70bddbb3 100644 --- a/src/translations/fa.ts +++ b/src/translations/fa.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'چرخ فلک', clearEntry: 'پاک کردن ورودی', close: 'بستن', + copied: 'کپی شد', copy: 'رونوشت', currentValue: 'مقدار فعلی', + error: 'خطا', goToSlide: (slide, count) => `رفتن به اسلاید ${slide} از ${count}`, hidePassword: 'پنهان کردن رمز', loading: 'بارگذاری', diff --git a/src/translations/fr.ts b/src/translations/fr.ts index a760fe8413..e1386c976c 100644 --- a/src/translations/fr.ts +++ b/src/translations/fr.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Carrousel', clearEntry: `Effacer l'entrée`, close: 'Fermer', + copied: 'Copié', copy: 'Copier', currentValue: 'Valeur actuelle', + error: 'Erreur', goToSlide: (slide, count) => `Aller à la diapositive ${slide} de ${count}`, hidePassword: 'Masquer le mot de passe', loading: 'Chargement', diff --git a/src/translations/he.ts b/src/translations/he.ts index 5918780457..91d0f2c993 100644 --- a/src/translations/he.ts +++ b/src/translations/he.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'קרוסלה', clearEntry: 'נקה קלט', close: 'סגור', + copied: 'מוּעֲתָק', copy: 'העתק', currentValue: 'ערך נוכחי', + error: 'שְׁגִיאָה', goToSlide: (slide, count) => `עבור לשקופית ${slide} של ${count}`, hidePassword: 'הסתר סיסמא', loading: 'טוען', diff --git a/src/translations/hu.ts b/src/translations/hu.ts index 7ff13be2bf..8272af8563 100644 --- a/src/translations/hu.ts +++ b/src/translations/hu.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Körhinta', clearEntry: 'Bejegyzés törlése', close: 'Bezárás', + copied: 'Másolva', copy: 'Másolás', currentValue: 'Aktuális érték', + error: 'Hiba', goToSlide: (slide, count) => `Ugrás a ${count}/${slide}. diára`, hidePassword: 'Jelszó elrejtése', loading: 'Betöltés', diff --git a/src/translations/ja.ts b/src/translations/ja.ts index 47217e808d..62ba4ed6c4 100644 --- a/src/translations/ja.ts +++ b/src/translations/ja.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'カルーセル', clearEntry: 'クリアエントリ', close: '閉じる', + copied: 'コピーされました', copy: 'コピー', currentValue: '現在の価値', + error: 'エラー', goToSlide: (slide, count) => `${count} 枚中 ${slide} 枚のスライドに移動`, hidePassword: 'パスワードを隠す', loading: '読み込み中', diff --git a/src/translations/nl.ts b/src/translations/nl.ts index a4c859b85a..6357fa7b21 100644 --- a/src/translations/nl.ts +++ b/src/translations/nl.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Carrousel', clearEntry: 'Invoer wissen', close: 'Sluiten', + copied: 'Gekopieerd', copy: 'Kopiëren', currentValue: 'Huidige waarde', + error: 'Fout', goToSlide: (slide, count) => `Ga naar slide ${slide} van ${count}`, hidePassword: 'Verberg wachtwoord', loading: 'Bezig met laden', diff --git a/src/translations/pl.ts b/src/translations/pl.ts index 5630a4e03a..b22913c663 100644 --- a/src/translations/pl.ts +++ b/src/translations/pl.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Karuzela', clearEntry: 'Wyczyść wpis', close: 'Zamknij', + copied: 'Skopiowane', copy: 'Kopiuj', currentValue: 'Aktualna wartość', + error: 'Błąd', goToSlide: (slide, count) => `Przejdź do slajdu ${slide} z ${count}`, hidePassword: 'Ukryj hasło', loading: 'Ładowanie', diff --git a/src/translations/pt.ts b/src/translations/pt.ts index b433c6a3fb..c093efac45 100644 --- a/src/translations/pt.ts +++ b/src/translations/pt.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Carrossel', clearEntry: 'Limpar entrada', close: 'Fechar', + copied: 'Copiado', copy: 'Copiar', currentValue: 'Valor atual', + error: 'Erro', goToSlide: (slide, count) => `Vá para o slide ${slide} de ${count}`, hidePassword: 'Esconder a senha', loading: 'Carregando', diff --git a/src/translations/ru.ts b/src/translations/ru.ts index ee9f147220..87eae99fbb 100644 --- a/src/translations/ru.ts +++ b/src/translations/ru.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Карусель', clearEntry: 'Очистить запись', close: 'Закрыть', + copied: 'Скопировано', copy: 'Скопировать', currentValue: 'Текущее значение', + error: 'Ошибка', goToSlide: (slide, count) => `Перейти к слайду ${slide} из ${count}`, hidePassword: 'Скрыть пароль', loading: 'Загрузка', diff --git a/src/translations/sv.ts b/src/translations/sv.ts index 9c1015c88b..e9c9f546f7 100644 --- a/src/translations/sv.ts +++ b/src/translations/sv.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Karusell', clearEntry: 'Återställ val', close: 'Stäng', + copied: 'Kopierade', copy: 'Kopiera', currentValue: 'Nuvarande värde', + error: 'Fel', goToSlide: (slide, count) => `Gå till bild ${slide} av ${count}`, hidePassword: 'Dölj lösenord', loading: 'Läser in', diff --git a/src/translations/tr.ts b/src/translations/tr.ts index 1d983a92bd..5635963a7b 100644 --- a/src/translations/tr.ts +++ b/src/translations/tr.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: 'Atlıkarınca', clearEntry: 'Girişi sil', close: 'Kapat', + copied: 'Kopyalandı', copy: 'Kopya', currentValue: 'Mevcut değer', + error: 'Hata', goToSlide: (slide, count) => `${count} slayttan ${slide} slayta gidin`, hidePassword: 'Şifreyi sakla', loading: 'Yükleme', diff --git a/src/translations/zh-tw.ts b/src/translations/zh-tw.ts index 425c182af7..6cb7a173ef 100644 --- a/src/translations/zh-tw.ts +++ b/src/translations/zh-tw.ts @@ -9,8 +9,10 @@ const translation: Translation = { carousel: '旋轉木馬', clearEntry: '清空', close: '關閉', + copied: '已復制', copy: '複製', currentValue: '當前值', + error: '錯誤', goToSlide: (slide, count) => `轉到第 ${slide} 張幻燈片，共 ${count} 張`, hidePassword: '隱藏密碼', loading: '載入中', diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts index 0b52443ab7..9f22282eb5 100644 --- a/src/utilities/localize.ts +++ b/src/utilities/localize.ts @@ -16,8 +16,10 @@ export interface Translation extends DefaultTranslation { carousel: string; clearEntry: string; close: string; + copied: string; copy: string; currentValue: string; + error: string; goToSlide: (slide: number, count: number) => string; hidePassword: string; loading: string; From e21943f4fbe1fe50e4175cc90c04fe16003fa9ea Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 10:30:40 -0400 Subject: [PATCH 14/23] fix typos/whitespace --- cspell.json | 2 ++ docs/assets/styles/docs.css | 8 +++++++- src/internal/shoelace-element.test.ts | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/cspell.json b/cspell.json index 087ede4eeb..1ae8733612 100644 --- a/cspell.json +++ b/cspell.json @@ -51,6 +51,7 @@ "erroneou", "errormessage", "esbuild", + "exportmaps", "exportparts", "fieldsets", "formaction", @@ -152,6 +153,7 @@ "tinycolor", "transitionend", "treeitem", + "treeshaking", "Triaging", "turbolinks", "typeof", diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index ac1ed3a62b..7b52198156 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -1066,23 +1066,29 @@ html.sidebar-open #menu-toggle { /* Hide when not defined to prevent extra wide icon toolbar while loading */ display: none; } + #theme-selector sl-menu { - /* Set an initial size to prevent width being initally too small when first opening on small screen width */ + /* Set an initial size to prevent width being too small when first opening on small screen width */ width: 140px; } + #theme-selector sl-button { transition: 250ms scale ease; } + #theme-selector sl-button::part(base) { color: var(--sl-color-neutral-0); } + #theme-selector sl-button::part(label) { display: flex; padding: 0.5rem; } + #theme-selector sl-icon { font-size: 1.25rem; } + .sl-theme-dark #theme-selector sl-button::part(base) { color: var(--sl-color-neutral-1000); } diff --git a/src/internal/shoelace-element.test.ts b/src/internal/shoelace-element.test.ts index 3199015efb..21fbf6cd32 100644 --- a/src/internal/shoelace-element.test.ts +++ b/src/internal/shoelace-element.test.ts @@ -33,7 +33,7 @@ function stubCustomElements() { return; } - // Assign it a random string so it doesnt pollute globally. + // Assign it a random string so it doesn't pollute globally. const randomTagName = str + '-' + counter.toString(); counter++; stub.wrappedMethod.apply(window.customElements, [randomTagName, ctor]); From a6e225e47cefce4f01181f8a6a7b59f42be6a921 Mon Sep 17 00:00:00 2001 From: Burton Smith <31320098+break-stuff@users.noreply.github.com> Date: Fri, 11 Aug 2023 10:51:33 -0400 Subject: [PATCH 15/23] upgrade vs code integration package (#1500) * upgrade vs code integration package * add references --- custom-elements-manifest.config.js | 12 ++++++---- package-lock.json | 38 +++++++++++++++--------------- package.json | 2 +- 3 files changed, 28 insertions(+), 24 deletions(-) diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 865579760f..7fdf455d0d 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -1,9 +1,9 @@ -import { generateCustomData } from 'cem-plugin-vs-code-custom-data-generator'; +import * as path from 'path'; +import { customElementVsCodePlugin } from "custom-element-vs-code-integration"; import { parse } from 'comment-parser'; import { pascalCase } from 'pascal-case'; import commandLineArgs from 'command-line-args'; import fs from 'fs'; -import * as path from 'path'; const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8')); const { name, description, version, author, homepage, license } = packageData; @@ -191,9 +191,13 @@ export default { } }, // Generate custom VS Code data - generateCustomData({ + customElementVsCodePlugin({ outdir, - cssFileName: null + cssFileName: null, + referencesTemplate: (_, tag) => [{ + name: "Documentation", + url: `https://shoelace.style/components/${tag.replace('sl-', '')}` + }] }) ] }; diff --git a/package-lock.json b/package-lock.json index 89e44da5c4..2d3e3ae5aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,12 +32,12 @@ "@web/test-runner-playwright": "^0.9.0", "bootstrap-icons": "^1.10.5", "browser-sync": "^2.29.3", - "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chalk": "^5.2.0", "change-case": "^4.1.2", "command-line-args": "^5.2.1", "comment-parser": "^1.3.1", "cspell": "^6.18.1", + "custom-element-vs-code-integration": "^1.1.0", "del": "^7.0.0", "download": "^8.0.0", "esbuild": "^0.18.2", @@ -4545,15 +4545,6 @@ "upper-case-first": "^2.0.2" } }, - "node_modules/cem-plugin-vs-code-custom-data-generator": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz", - "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==", - "dev": true, - "dependencies": { - "prettier": "^2.7.1" - } - }, "node_modules/chai-a11y-axe": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz", @@ -5696,6 +5687,15 @@ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", "dev": true }, + "node_modules/custom-element-vs-code-integration": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz", + "integrity": "sha512-M7f4zQIAzpdZGRcZpWmpONyf8zpiGZCU8U7z7s5q6460deIebLLQP/klTLLcI3XyWoCjUhwDwGJiZz9he8Y2ig==", + "dev": true, + "dependencies": { + "prettier": "^2.7.1" + } + }, "node_modules/custom-elements-manifest": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz", @@ -20621,15 +20621,6 @@ "upper-case-first": "^2.0.2" } }, - "cem-plugin-vs-code-custom-data-generator": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/cem-plugin-vs-code-custom-data-generator/-/cem-plugin-vs-code-custom-data-generator-1.4.1.tgz", - "integrity": "sha512-mulzg6I2wJVNKCM9ml4ttxTnGK25kHHdkhX979vbrKwSIIplFnPOgGa0Sj14pQWnfDwbGr6pSbLgBmi4nVHFxA==", - "dev": true, - "requires": { - "prettier": "^2.7.1" - } - }, "chai-a11y-axe": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/chai-a11y-axe/-/chai-a11y-axe-1.4.0.tgz", @@ -21516,6 +21507,15 @@ "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", "dev": true }, + "custom-element-vs-code-integration": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.1.0.tgz", + "integrity": "sha512-M7f4zQIAzpdZGRcZpWmpONyf8zpiGZCU8U7z7s5q6460deIebLLQP/klTLLcI3XyWoCjUhwDwGJiZz9he8Y2ig==", + "dev": true, + "requires": { + "prettier": "^2.7.1" + } + }, "custom-elements-manifest": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz", diff --git a/package.json b/package.json index 1142af25be..cf17694879 100644 --- a/package.json +++ b/package.json @@ -90,12 +90,12 @@ "@web/test-runner-playwright": "^0.9.0", "bootstrap-icons": "^1.10.5", "browser-sync": "^2.29.3", - "cem-plugin-vs-code-custom-data-generator": "^1.4.1", "chalk": "^5.2.0", "change-case": "^4.1.2", "command-line-args": "^5.2.1", "comment-parser": "^1.3.1", "cspell": "^6.18.1", + "custom-element-vs-code-integration": "^1.1.0", "del": "^7.0.0", "download": "^8.0.0", "esbuild": "^0.18.2", From 8d617fb98cb5c7547e99eb0ef87cf493b33871f0 Mon Sep 17 00:00:00 2001 From: Alexander Krolick <104371843+ak-beam@users.noreply.github.com> Date: Fri, 11 Aug 2023 07:58:14 -0700 Subject: [PATCH 16/23] Expand on comment about space-separated value for sl-select (#1502) --- src/components/select/select.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index 8a74a1d4f7..bf4db7ce91 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -97,7 +97,10 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon /** * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the - * value will be a space-delimited list of values based on the options selected. + * value attribute will be a space-delimited list of values based on the options selected, and the value property + * will be an array. + * + * **Note** For this reason, SlOption values must not contain spaces. */ @property({ converter: { From e80b2c9fb9ba058a8e2f54c757417a187449785e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 11:01:00 -0400 Subject: [PATCH 17/23] prettier --- custom-elements-manifest.config.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/custom-elements-manifest.config.js b/custom-elements-manifest.config.js index 7fdf455d0d..2e3277912a 100644 --- a/custom-elements-manifest.config.js +++ b/custom-elements-manifest.config.js @@ -1,5 +1,5 @@ import * as path from 'path'; -import { customElementVsCodePlugin } from "custom-element-vs-code-integration"; +import { customElementVsCodePlugin } from 'custom-element-vs-code-integration'; import { parse } from 'comment-parser'; import { pascalCase } from 'pascal-case'; import commandLineArgs from 'command-line-args'; @@ -194,10 +194,12 @@ export default { customElementVsCodePlugin({ outdir, cssFileName: null, - referencesTemplate: (_, tag) => [{ - name: "Documentation", - url: `https://shoelace.style/components/${tag.replace('sl-', '')}` - }] + referencesTemplate: (_, tag) => [ + { + name: 'Documentation', + url: `https://shoelace.style/components/${tag.replace('sl-', '')}` + } + ] }) ] }; From a3450a7d83caa14bdf45f6fad7b98c9cae9d6e5b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 11:01:37 -0400 Subject: [PATCH 18/23] move emphasis --- src/components/select/select.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index bf4db7ce91..94b5037433 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -97,10 +97,8 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon /** * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the - * value attribute will be a space-delimited list of values based on the options selected, and the value property - * will be an array. - * - * **Note** For this reason, SlOption values must not contain spaces. + * value attribute will be a space-delimited list of values based on the options selected, and the value property will + * be an array. **For this reason, values must not contain spaces.** */ @property({ converter: { From cf543ef335434fc9126505591499df344e9c9e3c Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 08:25:46 -0700 Subject: [PATCH 19/23] don't hijack key presses in text fields; fixes #1492 (#1504) --- docs/pages/resources/changelog.md | 1 + src/components/tree/tree.component.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index d5550563e8..0cc37d33ae 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -16,6 +16,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added the `` component [#1473] - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] +- Fixed a bug that caused key presses in text fields to be hijacked when used inside `` [#1492] - Improved the behavior of the clear button in `` to prevent the component's width from shifting when toggled [#1496] - Improved `` to prevent user selection so the tooltip doesn't get highlighted when dragging selections - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts index 245a7f7b8b..0efaf8ee9a 100644 --- a/src/components/tree/tree.component.ts +++ b/src/components/tree/tree.component.ts @@ -222,10 +222,17 @@ export default class SlTree extends ShoelaceElement { } private handleKeyDown(event: KeyboardEvent) { + // Ignore key presses we aren't interested in if (!['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(event.key)) { return; } + // Ignore key presses when focus is inside a text field. This prevents the component from hijacking nested form + // controls that exist inside tree items. + if (event.composedPath().some((el: HTMLElement) => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))) { + return; + } + const items = this.getFocusableItems(); const isLtr = this.localize.dir() === 'ltr'; const isRtl = this.localize.dir() === 'rtl'; From f8c37e0d146d8df822dc2eb8906369a5d9132f70 Mon Sep 17 00:00:00 2001 From: king8fisher <140904760+king8fisher@users.noreply.github.com> Date: Fri, 11 Aug 2023 13:06:10 -0400 Subject: [PATCH 20/23] Fix missing comma in linear-gradient (#1506) --- src/components/color-picker/color-picker.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/color-picker/color-picker.component.ts b/src/components/color-picker/color-picker.component.ts index ac5c1e43df..614385beac 100644 --- a/src/components/color-picker/color-picker.component.ts +++ b/src/components/color-picker/color-picker.component.ts @@ -882,7 +882,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo style=${styleMap({ backgroundImage: `linear-gradient( to right, - ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0% + ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%, ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100% )` })} From 1383ea3fe8b6fe8cb3d8b1d4b7db7b0bff24830f Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 10:09:44 -0700 Subject: [PATCH 21/23] React import paths (#1507) * fix react imports in examples * move types to definition files * update changelog * update changelog --- docs/pages/components/alert.md | 26 +++---- docs/pages/components/animated-image.md | 8 +-- docs/pages/components/animation.md | 10 +-- docs/pages/components/avatar.md | 18 ++--- docs/pages/components/badge.md | 22 +++--- docs/pages/components/breadcrumb-item.md | 6 +- docs/pages/components/breadcrumb.md | 24 +++---- docs/pages/components/button-group.md | 50 ++++++------- docs/pages/components/button.md | 30 ++++---- docs/pages/components/card.md | 20 +++--- docs/pages/components/carousel-item.md | 4 +- docs/pages/components/carousel.md | 66 ++++++++--------- docs/pages/components/checkbox.md | 14 ++-- docs/pages/components/color-picker.md | 14 ++-- docs/pages/components/copy-button.md | 20 +++--- docs/pages/components/details.md | 8 +-- docs/pages/components/dialog.md | 28 ++++---- docs/pages/components/divider.md | 16 ++--- docs/pages/components/drawer.md | 44 ++++++------ docs/pages/components/dropdown.md | 70 +++++++++---------- docs/pages/components/format-bytes.md | 12 ++-- docs/pages/components/format-date.md | 8 +-- docs/pages/components/format-number.md | 4 +- docs/pages/components/icon-button.md | 14 ++-- docs/pages/components/icon.md | 8 +-- docs/pages/components/image-comparer.md | 4 +- docs/pages/components/include.md | 2 +- docs/pages/components/input.md | 30 ++++---- docs/pages/components/menu-item.md | 30 ++++---- docs/pages/components/menu-label.md | 8 +-- docs/pages/components/menu.md | 6 +- docs/pages/components/mutation-observer.md | 8 +-- docs/pages/components/option.md | 8 +-- docs/pages/components/popup.md | 66 ++++++++--------- docs/pages/components/progress-bar.md | 14 ++-- docs/pages/components/progress-ring.md | 16 ++--- docs/pages/components/qr-code.md | 12 ++-- docs/pages/components/radio-button.md | 32 ++++----- docs/pages/components/radio-group.md | 36 +++++----- docs/pages/components/radio.md | 10 +-- docs/pages/components/range.md | 20 +++--- docs/pages/components/rating.md | 20 +++--- docs/pages/components/relative-time.md | 8 +-- docs/pages/components/resize-observer.md | 2 +- docs/pages/components/select.md | 56 +++++++-------- docs/pages/components/skeleton.md | 12 ++-- docs/pages/components/spinner.md | 8 +-- docs/pages/components/split-panel.md | 28 ++++---- docs/pages/components/switch.md | 10 +-- docs/pages/components/tab-group.md | 42 +++++------ docs/pages/components/tab-panel.md | 6 +- docs/pages/components/tab.md | 2 +- docs/pages/components/tag.md | 8 +-- docs/pages/components/textarea.md | 20 +++--- docs/pages/components/tooltip.md | 34 ++++----- docs/pages/components/tree-item.md | 16 ++--- docs/pages/components/tree.md | 26 +++---- docs/pages/getting-started/form-controls.md | 24 +++---- docs/pages/resources/changelog.md | 2 + .../plop/templates/component/component.hbs | 6 -- scripts/plop/templates/component/define.hbs | 8 +++ src/components/alert/alert.component.ts | 6 -- src/components/alert/alert.ts | 8 +++ .../animated-image.component.ts | 6 -- .../animated-image/animated-image.ts | 8 +++ .../animation/animation.component.ts | 6 -- src/components/animation/animation.ts | 8 +++ src/components/avatar/avatar.component.ts | 6 -- src/components/avatar/avatar.ts | 8 +++ src/components/badge/badge.component.ts | 6 -- src/components/badge/badge.ts | 8 +++ .../breadcrumb-item.component.ts | 6 -- .../breadcrumb-item/breadcrumb-item.ts | 8 +++ .../breadcrumb/breadcrumb.component.ts | 6 -- src/components/breadcrumb/breadcrumb.ts | 8 +++ .../button-group/button-group.component.ts | 6 -- src/components/button-group/button-group.ts | 8 +++ src/components/button/button.component.ts | 6 -- src/components/button/button.ts | 8 +++ src/components/card/card.component.ts | 6 -- src/components/card/card.ts | 8 +++ .../carousel-item/carousel-item.component.ts | 6 -- src/components/carousel-item/carousel-item.ts | 8 +++ src/components/carousel/carousel.component.ts | 6 -- src/components/carousel/carousel.ts | 8 +++ src/components/checkbox/checkbox.component.ts | 6 -- src/components/checkbox/checkbox.ts | 8 +++ .../color-picker/color-picker.component.ts | 6 -- src/components/color-picker/color-picker.ts | 8 +++ .../copy-button/copy-button.component.ts | 6 -- src/components/copy-button/copy-button.ts | 8 +++ src/components/details/details.component.ts | 6 -- src/components/details/details.ts | 8 +++ src/components/dialog/dialog.component.ts | 6 -- src/components/dialog/dialog.ts | 8 +++ src/components/divider/divider.component.ts | 6 -- src/components/divider/divider.ts | 8 +++ src/components/drawer/drawer.component.ts | 6 -- src/components/drawer/drawer.ts | 8 +++ src/components/dropdown/dropdown.component.ts | 6 -- src/components/dropdown/dropdown.ts | 8 +++ .../format-bytes/format-bytes.component.ts | 6 -- src/components/format-bytes/format-bytes.ts | 8 +++ .../format-date/format-date.component.ts | 6 -- src/components/format-date/format-date.ts | 8 +++ .../format-number/format-number.component.ts | 6 -- src/components/format-number/format-number.ts | 8 +++ .../icon-button/icon-button.component.ts | 6 -- src/components/icon-button/icon-button.ts | 8 +++ src/components/icon/icon.component.ts | 6 -- src/components/icon/icon.ts | 8 +++ .../image-comparer.component.ts | 6 -- .../image-comparer/image-comparer.ts | 8 +++ src/components/include/include.component.ts | 6 -- src/components/include/include.ts | 8 +++ src/components/input/input.component.ts | 6 -- src/components/input/input.ts | 8 +++ .../menu-item/menu-item.component.ts | 6 -- src/components/menu-item/menu-item.ts | 8 +++ src/components/menu-label/menu-label.ts | 8 +++ src/components/menu/menu.component.ts | 6 -- src/components/menu/menu.ts | 8 +++ .../mutation-observer.component.ts | 6 -- .../mutation-observer/mutation-observer.ts | 8 +++ src/components/option/option.component.ts | 6 -- src/components/option/option.ts | 8 +++ src/components/popup/popup.component.ts | 6 -- src/components/popup/popup.ts | 8 +++ .../progress-bar/progress-bar.component.ts | 6 -- src/components/progress-bar/progress-bar.ts | 8 +++ .../progress-ring/progress-ring.component.ts | 6 -- src/components/progress-ring/progress-ring.ts | 8 +++ src/components/qr-code/qr-code.component.ts | 6 -- src/components/qr-code/qr-code.ts | 8 +++ .../radio-button/radio-button.component.ts | 6 -- src/components/radio-button/radio-button.ts | 8 +++ .../radio-group/radio-group.component.ts | 6 -- src/components/radio-group/radio-group.ts | 8 +++ src/components/radio/radio.ts | 8 +++ src/components/range/range.component.ts | 6 -- src/components/range/range.ts | 8 +++ src/components/rating/rating.component.ts | 6 -- src/components/rating/rating.ts | 8 +++ .../relative-time/relative-time.component.ts | 6 -- src/components/relative-time/relative-time.ts | 8 +++ .../resize-observer/resize-observer.ts | 8 +++ src/components/select/select.component.ts | 6 -- src/components/select/select.ts | 8 +++ src/components/skeleton/skeleton.component.ts | 6 -- src/components/skeleton/skeleton.ts | 8 +++ src/components/spinner/spinner.component.ts | 6 -- src/components/spinner/spinner.ts | 8 +++ src/components/split-panel/split-panel.ts | 8 +++ src/components/switch/switch.ts | 8 +++ src/components/tab-group/tab-group.ts | 8 +++ .../tab-panel/tab-panel.component.ts | 6 -- src/components/tab-panel/tab-panel.ts | 8 +++ src/components/tab/tab.ts | 8 +++ src/components/tag/tag.component.ts | 6 -- src/components/tag/tag.ts | 8 +++ src/components/textarea/textarea.component.ts | 6 -- src/components/textarea/textarea.ts | 8 +++ src/components/tooltip/tooltip.component.ts | 6 -- src/components/tooltip/tooltip.ts | 8 +++ .../tree-item/tree-item.component.ts | 6 -- src/components/tree-item/tree-item.ts | 8 +++ src/components/tree/tree.component.ts | 6 -- src/components/tree/tree.ts | 8 +++ .../visually-hidden.component.ts | 6 -- .../visually-hidden/visually-hidden.ts | 8 +++ 170 files changed, 1058 insertions(+), 896 deletions(-) diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md index 3c93dcebfa..a2451e2000 100644 --- a/docs/pages/components/alert.md +++ b/docs/pages/components/alert.md @@ -13,8 +13,8 @@ layout: component ``` ```jsx:react -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( @@ -75,8 +75,8 @@ Set the `variant` attribute to change the alert's variant. ``` ```jsx:react -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert. ```jsx:react import { useState } from 'react'; -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => { const [open, setOpen] = useState(true); @@ -175,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them. ``` ```jsx:react -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; const App = () => ( @@ -215,9 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti ```jsx:react import { useState } from 'react'; -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const css = ` .alert-duration sl-alert { @@ -306,9 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica ```jsx:react import { useRef } from 'react'; -import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAlert from '@shoelace-style/shoelace/dist/react/alert'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; function showToast(alert) { alert.toast(); diff --git a/docs/pages/components/animated-image.md b/docs/pages/components/animated-image.md index 242352be14..5fc634c633 100644 --- a/docs/pages/components/animated-image.md +++ b/docs/pages/components/animated-image.md @@ -13,7 +13,7 @@ layout: component ``` ```jsx:react -import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image'; +import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; const App = () => ( ( @@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element. {% raw %} ```jsx:react -import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image'; +import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image'; const App = () => ( ` and set an animation `name`. ``` ```jsx:react -import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/animation'; const css = ` .animation-overview .box { @@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/ ```jsx:react import { useEffect, useRef, useState } from 'react'; -import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/animation'; const css = ` .animation-scroll { @@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/ ``` ```jsx:react -import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/animation'; const css = ` .animation-keyframes .box { @@ -329,8 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init ```jsx:react import { useState } from 'react'; -import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlAnimation from '@shoelace-style/shoelace/dist/react/animation'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => { const [play, setPlay] = useState(false); diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md index 9392f672c3..9a3fc26f9a 100644 --- a/docs/pages/components/avatar.md +++ b/docs/pages/components/avatar.md @@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding ``` ```jsx:react -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; const App = () => ; ``` @@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`. ``` ```jsx:react -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; const App = () => ( ; ``` @@ -85,8 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho ``` ```jsx:react -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -116,8 +116,8 @@ Avatars can be shaped using the `shape` attribute. ``` ```jsx:react -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -167,8 +167,8 @@ You can group avatars with a few lines of CSS. ``` ```jsx:react -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const css = ` .avatar-group sl-avatar:not(:first-of-type) { diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md index d65a14469a..1710eee4b2 100644 --- a/docs/pages/components/badge.md +++ b/docs/pages/components/badge.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; const App = () => Badge; ``` @@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant. ``` ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; const App = () => ( <> @@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges. ``` ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; const App = () => ( <> @@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation ``` ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; const css = ` .badge-pulse sl-badge:not(:last-of-type) { @@ -157,8 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak {% raw %} ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -201,11 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're {% raw %} ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; -import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; +import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label'; const App = () => ( ( diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md index a827b4930e..9f707158c3 100644 --- a/docs/pages/components/breadcrumb.md +++ b/docs/pages/components/breadcrumb.md @@ -17,8 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag ``` ```jsx:react -import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; -import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; const App = () => ( @@ -51,8 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc ``` ```jsx:react -import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; -import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; const App = () => ( @@ -100,8 +100,8 @@ Use the `separator` slot to change the separator that goes between breadcrumb it ```jsx:react import '@shoelace-style/shoelace/dist/components/icon/icon.js'; -import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; -import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; const App = () => ( <> @@ -149,9 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item. ``` ```jsx:react -import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; -import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( @@ -181,9 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item. ``` ```jsx:react -import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb'; -import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb'; +import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md index 66c9771b7b..27e5c831d8 100644 --- a/docs/pages/components/button-group.md +++ b/docs/pages/components/button-group.md @@ -14,8 +14,8 @@ layout: component ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; const App = () => ( @@ -57,8 +57,8 @@ All button sizes are supported, but avoid mixing sizes within the same button gr ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; const App = () => ( <> @@ -134,8 +134,8 @@ Theme buttons are supported through the button's `variant` attribute. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; const App = () => ( <> @@ -213,8 +213,8 @@ Pill buttons are supported through the button's `pill` attribute. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; const App = () => ( <> @@ -283,11 +283,11 @@ Dropdowns can be placed inside button groups as long as the trigger is an ` ( @@ -328,11 +328,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -370,9 +370,9 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( <> @@ -441,10 +441,10 @@ Create interactive toolbars with button groups. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const css = ` .button-group-toolbar sl-button-group:not(:last-of-type) { diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index cb68615ac5..0b6d54055d 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => Button; ``` @@ -31,7 +31,7 @@ Use the `variant` attribute to set the button's variant. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -56,7 +56,7 @@ Use the `size` attribute to change a button's size. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -81,7 +81,7 @@ Use the `outline` attribute to draw outlined buttons with transparent background ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -118,7 +118,7 @@ Use the `pill` attribute to give buttons rounded edges. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -154,8 +154,8 @@ Use the `circle` attribute to create circular icon buttons. When this attribute ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -183,7 +183,7 @@ Use the `text` variant to create text buttons that share the same size as regula ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -212,7 +212,7 @@ It's often helpful to have a button that works like a link. This is possible by ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -247,7 +247,7 @@ As expected, buttons can be given a custom width by setting the `width` attribut {% raw %} ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -325,8 +325,8 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -398,7 +398,7 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -429,7 +429,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> @@ -469,7 +469,7 @@ Use the `disabled` attribute to disable a button. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; const App = () => ( <> diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md index 50da4aa55b..4d3bb7f38f 100644 --- a/docs/pages/components/card.md +++ b/docs/pages/components/card.md @@ -41,9 +41,9 @@ layout: component ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlCard from '@shoelace-style/shoelace/dist/react/card'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const css = ` .card-overview { @@ -106,7 +106,7 @@ Basic cards aren't very exciting, but they can display any content you want them ``` ```jsx:react -import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; +import SlCard from '@shoelace-style/shoelace/dist/react/card'; const css = ` .card-basic { @@ -161,8 +161,8 @@ Headers can be used to display titles and more. ``` ```jsx:react -import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlCard from '@shoelace-style/shoelace/dist/react/card'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const css = ` .card-header { @@ -227,9 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlCard from '@shoelace-style/shoelace/dist/react/card'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const css = ` .card-footer { @@ -282,7 +282,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches ``` ```jsx:react -import SlCard from '@shoelace-style/shoelace/dist/react/sl-card'; +import SlCard from '@shoelace-style/shoelace/dist/react/card'; const css = ` .card-image { diff --git a/docs/pages/components/carousel-item.md b/docs/pages/components/carousel-item.md index 17007529d3..3c9417f766 100644 --- a/docs/pages/components/carousel-item.md +++ b/docs/pages/components/carousel-item.md @@ -41,8 +41,8 @@ layout: component ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md index ccc6506fb8..b1d612173f 100644 --- a/docs/pages/components/carousel.md +++ b/docs/pages/components/carousel.md @@ -41,8 +41,8 @@ layout: component ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( <> @@ -124,8 +124,8 @@ Use the `pagination` attribute to show the total number of slides and the curren ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( @@ -203,8 +203,8 @@ Use the `navigation` attribute to show previous and next buttons. ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( @@ -282,8 +282,8 @@ By default, the carousel will not advanced beyond the first and last slides. You ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( @@ -361,8 +361,8 @@ The carousel will automatically advance when the `autoplay` attribute is used. T ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( @@ -459,10 +459,10 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s ```jsx:react import { useState } from 'react'; -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => { const [isEnabled, setIsEnabled] = useState(false); @@ -530,8 +530,8 @@ The `slides-per-page` attribute makes it possible to display multiple slides at {% raw %} ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const App = () => ( @@ -623,8 +623,8 @@ The content of the carousel can be changed by adding or removing carousel items. ```jsx:react import { useState } from 'react'; -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const css = ` .dynamic-carousel { @@ -740,8 +740,8 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a ``` ```jsx:react -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; const css = ` .vertical { @@ -863,11 +863,11 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's ```jsx:react import { useState } from 'react'; -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; const App = () => { const [aspectRatio, setAspectRatio] = useState('3/2'); @@ -971,10 +971,10 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro ```jsx:react import { useState } from 'react'; -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ( <> @@ -1137,10 +1137,10 @@ The carousel has a robust API that makes it possible to extend and customize. Th ```jsx:react import { useRef } from 'react'; -import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel'; -import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel'; +import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const css = ` .carousel-thumbnails { diff --git a/docs/pages/components/checkbox.md b/docs/pages/components/checkbox.md index 9eef2b8796..dd88b3f614 100644 --- a/docs/pages/components/checkbox.md +++ b/docs/pages/components/checkbox.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => Checkbox; ``` @@ -30,7 +30,7 @@ Use the `checked` attribute to activate the checkbox. ``` ```jsx:react -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => Checked; ``` @@ -44,7 +44,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate. ``` ```jsx:react -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => Indeterminate; ``` @@ -58,7 +58,7 @@ Use the `disabled` attribute to disable the checkbox. ``` ```jsx:react -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => Disabled; ``` @@ -76,7 +76,7 @@ Use the `size` attribute to change a checkbox's size. ``` ```jsx:react -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => ( <> @@ -127,8 +127,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi ```jsx:react import { useEffect, useRef } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; const App = () => { const checkbox = useRef(null); diff --git a/docs/pages/components/color-picker.md b/docs/pages/components/color-picker.md index 2542252457..a85dbdd3d9 100644 --- a/docs/pages/components/color-picker.md +++ b/docs/pages/components/color-picker.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `value` attribute to set an initial value for the color picker. ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ; ``` @@ -44,7 +44,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled, ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ; ``` @@ -63,7 +63,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle` ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ( <> @@ -90,7 +90,7 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ( ( <> @@ -134,7 +134,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli ``` ```jsx:react -import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker'; +import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker'; const App = () => ; ``` diff --git a/docs/pages/components/copy-button.md b/docs/pages/components/copy-button.md index 682f92b546..1565e13d05 100644 --- a/docs/pages/components/copy-button.md +++ b/docs/pages/components/copy-button.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const App = () => ( @@ -33,7 +33,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const App = () => ( ( <> @@ -99,8 +99,8 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; -import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; +import { SlInput } from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> @@ -134,7 +134,7 @@ This example demonstrates what happens when a copy error occurs. You can customi ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const App = () => ( @@ -150,7 +150,7 @@ Copy buttons can be disabled by adding the `disabled` attribute. ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const App = () => ( @@ -166,7 +166,7 @@ A success indicator is briefly shown after copying. You can customize the length ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const App = () => ( @@ -216,7 +216,7 @@ You can customize the button to your liking with CSS. ``` ```jsx:react -import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button'; +import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button'; const css = ` .custom-styles { diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md index 765f6f46c5..89d997321e 100644 --- a/docs/pages/components/details.md +++ b/docs/pages/components/details.md @@ -15,7 +15,7 @@ layout: component ``` ```jsx:react -import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; +import SlDetails from '@shoelace-style/shoelace/dist/react/details'; const App = () => ( @@ -39,7 +39,7 @@ Use the `disable` attribute to prevent the details from expanding. ``` ```jsx:react -import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; +import SlDetails from '@shoelace-style/shoelace/dist/react/details'; const App = () => ( @@ -71,8 +71,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ``` ```jsx:react -import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlDetails from '@shoelace-style/shoelace/dist/react/details'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const css = ` sl-details.custom-icon::part(summary-icon) { diff --git a/docs/pages/components/dialog.md b/docs/pages/components/dialog.md index e26234696e..46dca36f41 100644 --- a/docs/pages/components/dialog.md +++ b/docs/pages/components/dialog.md @@ -27,8 +27,8 @@ layout: component ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -76,8 +76,8 @@ Use the `--width` custom property to set the dialog's width. ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -127,8 +127,8 @@ By design, a dialog's height will never exceed that of the viewport. As such, di ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -186,9 +186,9 @@ The header shows a functional close button by default. You can use the `header-a ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => { const [open, setOpen] = useState(false); @@ -249,8 +249,8 @@ You can use `event.detail.source` to determine what triggered the request to clo ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; const App = () => { const [open, setOpen] = useState(false); @@ -302,9 +302,9 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDialog from '@shoelace-style/shoelace/dist/react/dialog'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { const [open, setOpen] = useState(false); diff --git a/docs/pages/components/divider.md b/docs/pages/components/divider.md index ee2b56d2b6..2d3e06217f 100644 --- a/docs/pages/components/divider.md +++ b/docs/pages/components/divider.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ; ``` @@ -28,7 +28,7 @@ Use the `--width` custom property to change the width of the divider. {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ; ``` @@ -46,7 +46,7 @@ Use the `--color` custom property to change the color of the divider. {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ; ``` @@ -68,7 +68,7 @@ Use the `--spacing` custom property to change the amount of space between the di {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => ( <> @@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; const App = () => (
( diff --git a/docs/pages/components/drawer.md b/docs/pages/components/drawer.md index 23167ab6eb..329d38d237 100644 --- a/docs/pages/components/drawer.md +++ b/docs/pages/components/drawer.md @@ -27,8 +27,8 @@ layout: component ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -74,8 +74,8 @@ By default, drawers slide in from the end. To make the drawer slide in from the ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -119,8 +119,8 @@ To make the drawer slide in from the top, set the `placement` attribute to `top` ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -164,8 +164,8 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -219,8 +219,8 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -287,8 +287,8 @@ Use the `--size` custom property to set the drawer's size. This will be applied ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -338,8 +338,8 @@ By design, a drawer's height will never exceed 100% of its container. As such, d ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -396,9 +396,9 @@ The header shows a functional close button by default. You can use the `header-a ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => { const [open, setOpen] = useState(false); @@ -454,8 +454,8 @@ You can use `event.detail.source` to determine what triggered the request to clo ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; const App = () => { const [open, setOpen] = useState(false); @@ -507,9 +507,9 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { const [open, setOpen] = useState(false); diff --git a/docs/pages/components/dropdown.md b/docs/pages/components/dropdown.md index d624f54bf0..da08f88167 100644 --- a/docs/pages/components/dropdown.md +++ b/docs/pages/components/dropdown.md @@ -33,12 +33,12 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -98,10 +98,10 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [ ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => { function handleSelect(event) { @@ -151,10 +151,10 @@ Alternatively, you can listen for the `click` event on individual menu items. No ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => { function handleCut() { @@ -203,11 +203,11 @@ The preferred placement of the dropdown can be set with the `placement` attribut ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -245,11 +245,11 @@ The distance from the panel to the trigger can be customized using the `distance ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -287,11 +287,11 @@ The offset of the panel along the trigger can be customized using the `skidding` ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -346,12 +346,12 @@ Dropdown panels will be clipped if they're inside a container that has `overflow ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const css = ` .dropdown-hoist { diff --git a/docs/pages/components/format-bytes.md b/docs/pages/components/format-bytes.md index d9ca846221..82f95d9060 100644 --- a/docs/pages/components/format-bytes.md +++ b/docs/pages/components/format-bytes.md @@ -24,9 +24,9 @@ layout: component ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { const [value, setValue] = useState(1000); @@ -64,7 +64,7 @@ Set the `value` attribute to a number to get the value in bytes. ``` ```jsx:react -import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; const App = () => ( <> @@ -91,7 +91,7 @@ To get the value in bits, set the `unit` attribute to `bit`. ``` ```jsx:react -import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; const App = () => ( <> @@ -118,7 +118,7 @@ Use the `lang` attribute to set the number formatting locale. ``` ```jsx:react -import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes'; +import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes'; const App = () => ( <> diff --git a/docs/pages/components/format-date.md b/docs/pages/components/format-date.md index 2013cca6ac..10e39a8208 100644 --- a/docs/pages/components/format-date.md +++ b/docs/pages/components/format-date.md @@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev ``` ```jsx:react -import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; const App = () => ; ``` @@ -51,7 +51,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h ``` ```jsx:react -import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; const App = () => ( <> @@ -91,7 +91,7 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T ``` ```jsx:react -import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; const App = () => ( <> @@ -113,7 +113,7 @@ Russian: ``` ```jsx:react -import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date'; +import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date'; const App = () => ( <> diff --git a/docs/pages/components/format-number.md b/docs/pages/components/format-number.md index 2e1a51df18..d54187db13 100644 --- a/docs/pages/components/format-number.md +++ b/docs/pages/components/format-number.md @@ -95,7 +95,7 @@ Russian: ( <> @@ -121,7 +121,7 @@ To format a number as a monetary value, set the `type` attribute to `currency` a ``` ```jsx:react -import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number'; +import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number'; const App = () => ( <> diff --git a/docs/pages/components/icon-button.md b/docs/pages/components/icon-button.md index 3cd0475399..2606e1d773 100644 --- a/docs/pages/components/icon-button.md +++ b/docs/pages/components/icon-button.md @@ -12,7 +12,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com ``` ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => ; ``` @@ -32,7 +32,7 @@ Icon buttons inherit their parent element's `font-size`. {% raw %} ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => ( <> @@ -73,7 +73,7 @@ Icon buttons are designed to have a uniform appearance, so their color is not in ``` ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const css = ` .icon-button-color sl-icon-button::part(base) { @@ -112,7 +112,7 @@ Use the `href` attribute to convert the button to a link. ``` ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => ; ``` @@ -128,8 +128,8 @@ Wrap a tooltip around an icon button to provide contextual information to the us ``` ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( @@ -147,7 +147,7 @@ Use the `disabled` attribute to disable the icon button. ``` ```jsx:react -import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button'; +import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; const App = () => ; ``` diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md index 97366c3fa7..9a8b8bd46e 100644 --- a/docs/pages/components/icon.md +++ b/docs/pages/components/icon.md @@ -70,7 +70,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co {% raw %} ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> @@ -132,7 +132,7 @@ Icons are sized relative to the current font size. To change their size, set the {% raw %} ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => (
@@ -167,7 +167,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ; ``` @@ -183,7 +183,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a {% raw %} ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ; ``` diff --git a/docs/pages/components/image-comparer.md b/docs/pages/components/image-comparer.md index d4fe0d1fcb..9e1836a00b 100644 --- a/docs/pages/components/image-comparer.md +++ b/docs/pages/components/image-comparer.md @@ -23,7 +23,7 @@ For best results, use images that share the same dimensions. The slider can be c ``` ```jsx:react -import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer'; +import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer'; const App = () => ( @@ -63,7 +63,7 @@ Use the `position` attribute to set the initial position of the slider. This is ``` ```jsx:react -import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer'; +import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer'; const App = () => ( diff --git a/docs/pages/components/include.md b/docs/pages/components/include.md index 7ef6ef452a..763737610e 100644 --- a/docs/pages/components/include.md +++ b/docs/pages/components/include.md @@ -14,7 +14,7 @@ The included content will be inserted into the `` element's default ``` ```jsx:react -import SlInclude from '@shoelace-style/shoelace/dist/react/sl-include'; +import SlInclude from '@shoelace-style/shoelace/dist/react/include'; const App = () => ; ``` diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md index c762d5b30f..2a60cbf0e8 100644 --- a/docs/pages/components/input.md +++ b/docs/pages/components/input.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -30,8 +30,8 @@ Use the `label` attribute to give the input an accessible label. For labels that ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -45,8 +45,8 @@ Add descriptive help text to an input with the `help-text` attribute. For help t ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -60,7 +60,7 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -74,7 +74,7 @@ Add the `clearable` attribute to add a clear button when the input has content. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -88,7 +88,7 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -102,7 +102,7 @@ Add the `filled` attribute to draw a filled input. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -116,7 +116,7 @@ Use the `disabled` attribute to disable an input. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ; ``` @@ -134,7 +134,7 @@ Use the `size` attribute to change an input's size. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> @@ -160,7 +160,7 @@ Use the `pill` attribute to give inputs rounded edges. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> @@ -186,7 +186,7 @@ The `type` attribute controls the type of input the browser renders. ``` ```jsx:react -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> @@ -221,8 +221,8 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md index 81a3e649c9..ef80dfbb0a 100644 --- a/docs/pages/components/menu-item.md +++ b/docs/pages/components/menu-item.md @@ -28,10 +28,10 @@ layout: component {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -75,8 +75,8 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected. {% raw %} ```jsx:react -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -118,11 +118,11 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s {% raw %} ```jsx:react -import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge'; -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlBadge from '@shoelace-style/shoelace/dist/react/badge'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -168,8 +168,8 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei {% raw %} ```jsx:react -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( @@ -218,8 +218,8 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide {% raw %} ```jsx:react -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => { function handleSelect(event) { diff --git a/docs/pages/components/menu-label.md b/docs/pages/components/menu-label.md index e245f4210e..2b19037ca3 100644 --- a/docs/pages/components/menu-label.md +++ b/docs/pages/components/menu-label.md @@ -22,10 +22,10 @@ layout: component {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( diff --git a/docs/pages/components/menu.md b/docs/pages/components/menu.md index 2bc49fe1f9..2039960ae6 100644 --- a/docs/pages/components/menu.md +++ b/docs/pages/components/menu.md @@ -22,9 +22,9 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu- {% raw %} ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlMenu from '@shoelace-style/shoelace/dist/react/menu'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( diff --git a/docs/pages/components/mutation-observer.md b/docs/pages/components/mutation-observer.md index 2e62272756..52d0d98904 100644 --- a/docs/pages/components/mutation-observer.md +++ b/docs/pages/components/mutation-observer.md @@ -45,8 +45,8 @@ The mutation observer will report changes to the content it wraps through the `s ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer'; const css = ` .resize-observer-overview div { @@ -147,8 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer'; const css = ` .mutation-child-list .buttons { diff --git a/docs/pages/components/option.md b/docs/pages/components/option.md index c335beaa84..2558d67736 100644 --- a/docs/pages/components/option.md +++ b/docs/pages/components/option.md @@ -14,8 +14,8 @@ layout: component ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -41,8 +41,8 @@ Use the `disabled` attribute to disable an option and prevent it from being sele ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md index 49cc5163a6..1681209045 100644 --- a/docs/pages/components/popup.md +++ b/docs/pages/components/popup.md @@ -104,11 +104,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-overview sl-popup { @@ -273,8 +273,8 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-active span[slot='anchor'] { @@ -346,7 +346,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your ``` ```jsx:react -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; const css = ` #external-anchor { @@ -441,9 +441,9 @@ Since placement is preferred when using `flip`, you can observe the popup's curr ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const css = ` .popup-placement span[slot='anchor'] { @@ -545,8 +545,8 @@ Use the `distance` attribute to change the distance between the popup and its an ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const css = ` .popup-distance span[slot='anchor'] { @@ -642,8 +642,8 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const css = ` .popup-skidding span[slot='anchor'] { @@ -786,10 +786,10 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-arrow sl-popup { @@ -942,9 +942,9 @@ Use the `sync` attribute to make the popup the same width or height as the ancho ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const css = ` .popup-sync span[slot='anchor'] { @@ -1055,8 +1055,8 @@ Toggle the switch and scroll the container to see the difference. ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-strategy .overflow { @@ -1164,8 +1164,8 @@ Scroll the container to see how the popup flips to prevent clipping. ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-flip .overflow { @@ -1262,7 +1262,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre ``` ```jsx:react -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; const css = ` .popup-flip-fallbacks .overflow { @@ -1358,8 +1358,8 @@ Toggle the switch to see the difference. ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-shift .overflow { @@ -1471,8 +1471,8 @@ Scroll the container to see the popup resize as its available space changes. ```jsx:react import { useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` .popup-auto-size .overflow { @@ -1623,8 +1623,8 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc ```jsx:react import { useRef, useState } from 'react'; -import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup'; -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlPopup from '@shoelace-style/shoelace/dist/react/popup'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const css = ` /* If you need to set a z-index, set it on the popup part like this */ diff --git a/docs/pages/components/progress-bar.md b/docs/pages/components/progress-bar.md index b772db33df..faa5bdb1a6 100644 --- a/docs/pages/components/progress-bar.md +++ b/docs/pages/components/progress-bar.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; const App = () => ; ``` @@ -26,7 +26,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h ``` ```jsx:react -import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; const App = () => ; ``` @@ -42,7 +42,7 @@ Use the `--height` custom property to set the progress bar's height. {% raw %} ```jsx:react -import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; const App = () => ; ``` @@ -82,9 +82,9 @@ Use the default slot to show a value. ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; const App = () => { const [value, setValue] = useState(50); @@ -123,7 +123,7 @@ The `indeterminate` attribute can be used to inform the user that the operation ``` ```jsx:react -import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar'; +import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar'; const App = () => ; ``` diff --git a/docs/pages/components/progress-ring.md b/docs/pages/components/progress-ring.md index e57c26cc8a..14afd0dc89 100644 --- a/docs/pages/components/progress-ring.md +++ b/docs/pages/components/progress-ring.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; const App = () => ; ``` @@ -28,7 +28,7 @@ Use the `--size` custom property to set the diameter of the progress ring. {% raw %} ```jsx:react -import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; const App = () => ; ``` @@ -46,7 +46,7 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid {% raw %} ```jsx:react -import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; const App = () => ; ``` @@ -70,7 +70,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop {% raw %} ```jsx:react -import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; const App = () => ( ; ``` @@ -134,9 +134,9 @@ Use the default slot to show a label inside the progress ring. ```jsx:react import { useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring'; const App = () => { const [value, setValue] = useState(50); diff --git a/docs/pages/components/qr-code.md b/docs/pages/components/qr-code.md index 8059442d1d..4416e97577 100644 --- a/docs/pages/components/qr-code.md +++ b/docs/pages/components/qr-code.md @@ -39,8 +39,8 @@ QR codes are useful for providing small pieces of information to users who can q ```jsx:react import { useState } from 'react'; -import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const css = ` .qr-overview { @@ -81,7 +81,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s ``` ```jsx:react -import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; const App = () => ; ``` @@ -95,7 +95,7 @@ Use the `size` attribute to change the size of the QR code. ``` ```jsx:react -import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; const App = () => ; ``` @@ -109,7 +109,7 @@ Create a rounded effect with the `radius` attribute. ``` ```jsx:react -import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; const App = () => ; ``` @@ -136,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q ``` ```jsx:react -import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code'; +import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code'; const css = ` .qr-error-correction { diff --git a/docs/pages/components/radio-button.md b/docs/pages/components/radio-button.md index 101112b2be..c7bea66eef 100644 --- a/docs/pages/components/radio-button.md +++ b/docs/pages/components/radio-button.md @@ -16,8 +16,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -43,8 +43,8 @@ To set the initial value and checked state, use the `value` attribute on the con ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio button. ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -111,8 +111,8 @@ Use the `size` attribute to change a radio button's size. ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -168,8 +168,8 @@ Use the `pill` attribute to give radio buttons rounded edges. ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -221,9 +221,9 @@ Use the `prefix` and `suffix` slots to add icons. ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -275,9 +275,9 @@ You can omit button labels and use icons instead. Make sure to set a `label` att ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( diff --git a/docs/pages/components/radio-group.md b/docs/pages/components/radio-group.md index e8cb23c9cb..82ad64d8bb 100644 --- a/docs/pages/components/radio-group.md +++ b/docs/pages/components/radio-group.md @@ -14,8 +14,8 @@ layout: component ``` ```jsx:react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -41,8 +41,8 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h ``` ```jsx:react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -66,8 +66,8 @@ const App = () => ( ``` ```jsx:react -import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -91,8 +91,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t ``` ```jsx:react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -127,8 +127,8 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu ```jsx react import { useState } from 'react'; -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => { const [size, setSize] = useState('medium'); @@ -182,10 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => { function handleSubmit(event) { event.preventDefault(); @@ -255,10 +255,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi ```jsx:react import { useEffect, useRef } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => { const radioGroup = useRef(null); const errorMessage = 'You must choose this option'; diff --git a/docs/pages/components/radio.md b/docs/pages/components/radio.md index 03dcb7fd67..62ff53dd24 100644 --- a/docs/pages/components/radio.md +++ b/docs/pages/components/radio.md @@ -47,8 +47,8 @@ To set the initial value and checked state, use the `value` attribute on the con ``` ```jsx:react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -72,8 +72,8 @@ Use the `disabled` attribute to disable a radio. ``` ```jsx:react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; -import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; +import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group'; const App = () => ( @@ -115,7 +115,7 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change ``` ```jsx react -import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio'; +import SlRadio from '@shoelace-style/shoelace/dist/react/radio'; const App = () => ( <> diff --git a/docs/pages/components/range.md b/docs/pages/components/range.md index 6584c3fee3..8bf86a5fc8 100644 --- a/docs/pages/components/range.md +++ b/docs/pages/components/range.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `label` attribute to give the range an accessible label. For labels that ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -44,7 +44,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -58,7 +58,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -72,7 +72,7 @@ Use the `disabled` attribute to disable a slider. ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -86,7 +86,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -100,7 +100,7 @@ To disable the tooltip, set `tooltip` to `none`. ``` ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ; ``` @@ -121,7 +121,7 @@ You can customize the active and inactive portions of the track using the `--tra {% raw %} ```jsx:react -import SlRange from '@shoelace-style/shoelace/dist/react/sl-range'; +import SlRange from '@shoelace-style/shoelace/dist/react/range'; const App = () => ( ( `Total - ${value}%`} />; ``` diff --git a/docs/pages/components/rating.md b/docs/pages/components/rating.md index 7c7bfe4f63..fac6a6d213 100644 --- a/docs/pages/components/rating.md +++ b/docs/pages/components/rating.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -26,7 +26,7 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -40,7 +40,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max` ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -54,7 +54,7 @@ Use the `precision` attribute to let users select fractional ratings. ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -70,7 +70,7 @@ Set the `--symbol-size` custom property to adjust the size. {% raw %} ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -86,7 +86,7 @@ Use the `readonly` attribute to display a rating that users can't change. ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -100,7 +100,7 @@ Use the `disable` attribute to disable the rating. ``` ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ; ``` @@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert ```jsx:react import { useState } from 'react'; -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent']; const css = ` @@ -214,7 +214,7 @@ You can provide custom icons by passing a function to the `getSymbol` property. {% raw %} ```jsx:react -import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating'; +import SlRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ( ; ``` @@ -44,7 +44,7 @@ Use the `sync` attribute to update the displayed value automatically as time pas ``` ```jsx:react -import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time'; +import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; const date = new Date(new Date().getTime() - 60000); @@ -62,7 +62,7 @@ You can change how the time is displayed using the `format` attribute. Note that ``` ```jsx:react -import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time'; +import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time'; const App = () => ( <> @@ -88,7 +88,7 @@ Russian: ( <> diff --git a/docs/pages/components/resize-observer.md b/docs/pages/components/resize-observer.md index f22431e08e..593ff0a0ac 100644 --- a/docs/pages/components/resize-observer.md +++ b/docs/pages/components/resize-observer.md @@ -36,7 +36,7 @@ The resize observer will report changes to the dimensions of the elements it wra ``` ```jsx:react -import SlResizeObserver from '@shoelace-style/shoelace/dist/react/sl-resize-observer'; +import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer'; const css = ` .resize-observer-overview div { diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 5e66276b66..90d537b137 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -17,8 +17,8 @@ layout: component ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -51,8 +51,8 @@ Use the `label` attribute to give the select an accessible label. For labels tha ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -76,8 +76,8 @@ Add descriptive help text to a select with the `help-text` attribute. For help t ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -101,8 +101,8 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -126,8 +126,8 @@ Use the `clearable` attribute to make the control clearable. The clear button on ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -151,8 +151,8 @@ Add the `filled` attribute to draw a filled select. ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -176,8 +176,8 @@ Use the `pill` attribute to give selects rounded edges. ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -201,8 +201,8 @@ Use the `disabled` attribute to disable a select. ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -229,8 +229,8 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -262,9 +262,9 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u ``` ```jsx:react -import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider'; -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlDivider from '@shoelace-style/shoelace/dist/react/divider'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -294,8 +294,8 @@ Use `` to group listbox items visually. You can also use `` t ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( @@ -338,8 +338,8 @@ Use the `size` attribute to change a select's size. Note that size does not appl ``` ```jsx:react -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( <> @@ -423,9 +423,9 @@ Use the `prefix` slot to prepend an icon to the control. ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlOption from '@shoelace-style/shoelace/dist/react/sl-option'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlOption from '@shoelace-style/shoelace/dist/react/option'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( <> diff --git a/docs/pages/components/skeleton.md b/docs/pages/components/skeleton.md index c92236fc6f..93a39ec630 100644 --- a/docs/pages/components/skeleton.md +++ b/docs/pages/components/skeleton.md @@ -56,7 +56,7 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi ``` ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-overview header { @@ -139,7 +139,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s ``` ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-effects { @@ -200,7 +200,7 @@ Use multiple skeletons and some clever styles to simulate paragraphs. ``` ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-paragraphs sl-skeleton { @@ -265,7 +265,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel ``` ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-avatars sl-skeleton { @@ -360,7 +360,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl ``` ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-shapes sl-skeleton { @@ -423,7 +423,7 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's {% raw %} ```jsx:react -import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton'; +import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton'; const css = ` .skeleton-avatars sl-skeleton { diff --git a/docs/pages/components/spinner.md b/docs/pages/components/spinner.md index bded59fde2..e92c98b083 100644 --- a/docs/pages/components/spinner.md +++ b/docs/pages/components/spinner.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner'; const App = () => ; ``` @@ -30,7 +30,7 @@ Spinners are sized based on the current font size. To change their size, set the {% raw %} ```jsx:react -import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner'; const App = () => ( <> @@ -54,7 +54,7 @@ The width of the spinner's track can be changed by setting the `--track-width` c {% raw %} ```jsx:react -import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner'; +import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner'; const App = () => ( ( ( @@ -106,7 +106,7 @@ To set the initial position in pixels instead of a percentage, use the `position {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const App = () => ( @@ -164,7 +164,7 @@ Add the `vertical` attribute to render the split panel in a vertical orientation {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const App = () => ( @@ -252,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const css = ` .split-panel-snapping { @@ -344,7 +344,7 @@ Add the `disabled` attribute to prevent the divider from being repositioned. {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const App = () => ( @@ -421,9 +421,9 @@ Try resizing the example below with each option and notice how the panels respon ```jsx:react import { useState } from 'react'; -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => { const [primary, setPrimary] = useState(''); @@ -500,7 +500,7 @@ This examples demonstrates how you can ensure both panels are at least 150px usi {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const App = () => ( @@ -568,7 +568,7 @@ Create complex layouts that can be repositioned independently by nesting split p {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; const App = () => ( @@ -643,8 +643,8 @@ You can target the `divider` part to apply CSS properties to the divider. To add {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( @@ -731,8 +731,8 @@ Here's a more elaborate example that changes the divider's color and width and a {% raw %} ```jsx:react -import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel'; -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; +import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; const css = ` .split-panel-divider sl-split-panel { diff --git a/docs/pages/components/switch.md b/docs/pages/components/switch.md index 6839dee684..31630c064f 100644 --- a/docs/pages/components/switch.md +++ b/docs/pages/components/switch.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => Switch; ``` @@ -30,7 +30,7 @@ Use the `checked` attribute to activate the switch. ``` ```jsx:react -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => Checked; ``` @@ -44,7 +44,7 @@ Use the `disabled` attribute to disable the switch. ``` ```jsx:react -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => Disabled; ``` @@ -62,7 +62,7 @@ Use the `size` attribute to change a switch's size. ``` ```jsx:react -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => ( <> @@ -86,7 +86,7 @@ Use the available custom properties to change how the switch is styled. {% raw %} ```jsx:react -import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch'; +import SlSwitch from '@shoelace-style/shoelace/dist/react/switch'; const App = () => ( ( @@ -70,9 +70,9 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`. ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( @@ -116,9 +116,9 @@ Tabs can be shown on the starting side by setting `placement` to `start`. ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( @@ -162,9 +162,9 @@ Tabs can be shown on the ending side by setting `placement` to `end`. ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( @@ -226,9 +226,9 @@ Add the `closable` attribute to a tab to show a close button. This example shows ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => { function handleClose(event) { @@ -320,9 +320,9 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( @@ -430,9 +430,9 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( diff --git a/docs/pages/components/tab-panel.md b/docs/pages/components/tab-panel.md index c5849b73e3..93bcf27f91 100644 --- a/docs/pages/components/tab-panel.md +++ b/docs/pages/components/tab-panel.md @@ -20,9 +20,9 @@ layout: component ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; -import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group'; -import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; +import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group'; +import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel'; const App = () => ( diff --git a/docs/pages/components/tab.md b/docs/pages/components/tab.md index 4789d09b7c..0c04e0cec5 100644 --- a/docs/pages/components/tab.md +++ b/docs/pages/components/tab.md @@ -13,7 +13,7 @@ layout: component ``` ```jsx:react -import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab'; +import SlTab from '@shoelace-style/shoelace/dist/react/tab'; const App = () => ( <> diff --git a/docs/pages/components/tag.md b/docs/pages/components/tag.md index d05bf910ba..4339ff58d9 100644 --- a/docs/pages/components/tag.md +++ b/docs/pages/components/tag.md @@ -14,7 +14,7 @@ layout: component ``` ```jsx:react -import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; +import SlTag from '@shoelace-style/shoelace/dist/react/tag'; const App = () => ( <> @@ -40,7 +40,7 @@ Use the `size` attribute to change a tab's size. ``` ```jsx:react -import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; +import SlTag from '@shoelace-style/shoelace/dist/react/tag'; const App = () => ( <> @@ -62,7 +62,7 @@ Use the `pill` attribute to give tabs rounded edges. ``` ```jsx:react -import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; +import SlTag from '@shoelace-style/shoelace/dist/react/tag'; const App = () => ( <> @@ -108,7 +108,7 @@ Use the `removable` attribute to add a remove button to the tag. ``` ```jsx:react -import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag'; +import SlTag from '@shoelace-style/shoelace/dist/react/tag'; const css = ` .tags-removable sl-tag { diff --git a/docs/pages/components/textarea.md b/docs/pages/components/textarea.md index 850a76b78d..778660dd16 100644 --- a/docs/pages/components/textarea.md +++ b/docs/pages/components/textarea.md @@ -10,7 +10,7 @@ layout: component ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -30,7 +30,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -44,7 +44,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -58,7 +58,7 @@ Use the `rows` attribute to change the number of text rows that get shown. ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -72,7 +72,7 @@ Use the `placeholder` attribute to add a placeholder. ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -86,7 +86,7 @@ Add the `filled` attribute to draw a filled textarea. ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -100,7 +100,7 @@ Use the `disabled` attribute to disable a textarea. ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -118,7 +118,7 @@ Use the `size` attribute to change a textarea's size. ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ( <> @@ -140,7 +140,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` @@ -154,7 +154,7 @@ Textareas will automatically resize to expand to fit their content when `resize` ``` ```jsx:react -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => ; ``` diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md index abd22d8fff..6d0177b434 100644 --- a/docs/pages/components/tooltip.md +++ b/docs/pages/components/tooltip.md @@ -16,8 +16,8 @@ Tooltips use `display: contents` so they won't interfere with how elements are p ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( @@ -126,8 +126,8 @@ Use the `placement` attribute to set the preferred placement of the tooltip. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const css = ` .tooltip-placement-example { @@ -237,8 +237,8 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( @@ -270,9 +270,9 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t ```jsx:react import { useState } from 'react'; -import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => { const [open, setOpen] = useState(false); @@ -306,8 +306,8 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow {% raw %} ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => (
@@ -345,8 +345,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( @@ -372,8 +372,8 @@ Use the `--max-width` custom property to change the width the tooltip can grow t {% raw %} ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( @@ -410,8 +410,8 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto| ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const css = ` .tooltip-hoist { diff --git a/docs/pages/components/tree-item.md b/docs/pages/components/tree-item.md index d4c30bc884..cb50f69bd9 100644 --- a/docs/pages/components/tree-item.md +++ b/docs/pages/components/tree-item.md @@ -20,8 +20,8 @@ layout: component ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -63,8 +63,8 @@ A tree item can contain other tree items. This allows the node to be expanded or ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -104,8 +104,8 @@ Use the `selected` attribute to select a tree item initially. ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -145,8 +145,8 @@ Use the `expanded` attribute to expand a tree item initially. ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( diff --git a/docs/pages/components/tree.md b/docs/pages/components/tree.md index 1e950f3ef1..65816b8b81 100644 --- a/docs/pages/components/tree.md +++ b/docs/pages/components/tree.md @@ -37,8 +37,8 @@ layout: component ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -119,8 +119,8 @@ The `selection` attribute lets you change the selection behavior of the tree. ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => { const [selection, setSelection] = useState('single'); @@ -199,8 +199,8 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -268,8 +268,8 @@ If you want to disable this behavior after the first load, simply remove the `la ``` ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => { const [childItems, setChildItems] = useState([]); @@ -344,8 +344,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps ```jsx:react -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( @@ -429,9 +429,9 @@ Decorative icons can be used before labels to provide hints for each node. ``` ```jsx:react -import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon'; -import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree'; -import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item'; +import SlIcon from '@shoelace-style/shoelace/dist/react/icon'; +import SlTree from '@shoelace-style/shoelace/dist/react/tree'; +import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => { return ( diff --git a/docs/pages/getting-started/form-controls.md b/docs/pages/getting-started/form-controls.md index 2574e492fd..1fccb422f1 100644 --- a/docs/pages/getting-started/form-controls.md +++ b/docs/pages/getting-started/form-controls.md @@ -99,12 +99,12 @@ The form will not be submitted if a required field is incomplete. ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; -import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item'; -import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select'; -import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; +import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; +import SlSelect from '@shoelace-style/shoelace/dist/react/select'; +import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea'; const App = () => { function handleSubmit(event) { @@ -165,8 +165,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { function handleSubmit(event) { @@ -217,8 +217,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur ``` ```jsx:react -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { function handleSubmit(event) { @@ -279,8 +279,8 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa ```jsx:react import { useRef, useState } from 'react'; -import SlButton from '@shoelace-style/shoelace/dist/react/sl-button'; -import SlInput from '@shoelace-style/shoelace/dist/react/sl-input'; +import SlButton from '@shoelace-style/shoelace/dist/react/button'; +import SlInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => { const input = useRef(null); diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 0cc37d33ae..719fd4c87b 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -17,8 +17,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added the `` component [#1473] - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] - Fixed a bug that caused key presses in text fields to be hijacked when used inside `` [#1492] +- Fixed an upstream bug that caused React CodePen examples to stop working - Improved the behavior of the clear button in `` to prevent the component's width from shifting when toggled [#1496] - Improved `` to prevent user selection so the tooltip doesn't get highlighted when dragging selections +- Moved tag type definitions out of component files and into definition files - Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485] - Updated Bootstrap Icons to 1.10.5 diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs index 803f4ea853..a5e752c766 100644 --- a/scripts/plop/templates/component/component.hbs +++ b/scripts/plop/templates/component/component.hbs @@ -40,9 +40,3 @@ export default class {{ properCase tag }} extends ShoelaceElement { return html` `; } } - -declare global { - interface HTMLElementTagNameMap { - '{{ tag }}': {{ properCase tag }}; - } -} diff --git a/scripts/plop/templates/component/define.hbs b/scripts/plop/templates/component/define.hbs index 691c41cf5d..847e6b2c44 100644 --- a/scripts/plop/templates/component/define.hbs +++ b/scripts/plop/templates/component/define.hbs @@ -1,4 +1,12 @@ import {{ properCase tag }} from './{{ tagWithoutPrefix tag }}.component.js'; + export * from './{{ tagWithoutPrefix tag }}.component.js'; export default {{ properCase tag }}; + {{ properCase tag }}.define('{{ tag }}'); + +declare global { + interface HTMLElementTagNameMap { + '{{ tag }}': {{ properCase tag }}; + } +} diff --git a/src/components/alert/alert.component.ts b/src/components/alert/alert.component.ts index 8a174bcdad..5fd0722c83 100644 --- a/src/components/alert/alert.component.ts +++ b/src/components/alert/alert.component.ts @@ -239,9 +239,3 @@ setDefaultAnimation('alert.hide', { ], options: { duration: 250, easing: 'ease' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-alert': SlAlert; - } -} diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index d51a4e0bc6..563c26928c 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -1,4 +1,12 @@ import SlAlert from './alert.component.js'; + export * from './alert.component.js'; export default SlAlert; + SlAlert.define('sl-alert'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-alert': SlAlert; + } +} diff --git a/src/components/animated-image/animated-image.component.ts b/src/components/animated-image/animated-image.component.ts index 27ba367a8d..d301618dc0 100644 --- a/src/components/animated-image/animated-image.component.ts +++ b/src/components/animated-image/animated-image.component.ts @@ -114,9 +114,3 @@ export default class SlAnimatedImage extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-animated-image': SlAnimatedImage; - } -} diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts index b53f0e6853..d90324ec00 100644 --- a/src/components/animated-image/animated-image.ts +++ b/src/components/animated-image/animated-image.ts @@ -1,4 +1,12 @@ import SlAnimatedImage from './animated-image.component.js'; + export * from './animated-image.component.js'; export default SlAnimatedImage; + SlAnimatedImage.define('sl-animated-image'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-animated-image': SlAnimatedImage; + } +} diff --git a/src/components/animation/animation.component.ts b/src/components/animation/animation.component.ts index 832cd6192f..96a954e1fa 100644 --- a/src/components/animation/animation.component.ts +++ b/src/components/animation/animation.component.ts @@ -218,9 +218,3 @@ export default class SlAnimation extends ShoelaceElement { return html` `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-animation': SlAnimation; - } -} diff --git a/src/components/animation/animation.ts b/src/components/animation/animation.ts index f1bd3f9a58..9711c8a376 100644 --- a/src/components/animation/animation.ts +++ b/src/components/animation/animation.ts @@ -1,4 +1,12 @@ import SlAnimation from './animation.component.js'; + export * from './animation.component.js'; export default SlAnimation; + SlAnimation.define('sl-animation'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-animation': SlAnimation; + } +} diff --git a/src/components/avatar/avatar.component.ts b/src/components/avatar/avatar.component.ts index 446f2833fe..6a37ae5bd1 100644 --- a/src/components/avatar/avatar.component.ts +++ b/src/components/avatar/avatar.component.ts @@ -96,9 +96,3 @@ export default class SlAvatar extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-avatar': SlAvatar; - } -} diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts index 69b5997ab6..8355ab46c1 100644 --- a/src/components/avatar/avatar.ts +++ b/src/components/avatar/avatar.ts @@ -1,4 +1,12 @@ import SlAvatar from './avatar.component.js'; + export * from './avatar.component.js'; export default SlAvatar; + SlAvatar.define('sl-avatar'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-avatar': SlAvatar; + } +} diff --git a/src/components/badge/badge.component.ts b/src/components/badge/badge.component.ts index 5286d8e521..9232bf6120 100644 --- a/src/components/badge/badge.component.ts +++ b/src/components/badge/badge.component.ts @@ -48,9 +48,3 @@ export default class SlBadge extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-badge': SlBadge; - } -} diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index d3849cd5c2..7e08b17c6d 100644 --- a/src/components/badge/badge.ts +++ b/src/components/badge/badge.ts @@ -1,4 +1,12 @@ import SlBadge from './badge.component.js'; + export * from './badge.component.js'; export default SlBadge; + SlBadge.define('sl-badge'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-badge': SlBadge; + } +} diff --git a/src/components/breadcrumb-item/breadcrumb-item.component.ts b/src/components/breadcrumb-item/breadcrumb-item.component.ts index 781aaffcd2..53e1a8fe31 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.component.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.component.ts @@ -87,9 +87,3 @@ export default class SlBreadcrumbItem extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-breadcrumb-item': SlBreadcrumbItem; - } -} diff --git a/src/components/breadcrumb-item/breadcrumb-item.ts b/src/components/breadcrumb-item/breadcrumb-item.ts index 5be7859563..e8210a928c 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.ts @@ -1,4 +1,12 @@ import SlBreadcrumbItem from './breadcrumb-item.component.js'; + export * from './breadcrumb-item.component.js'; export default SlBreadcrumbItem; + SlBreadcrumbItem.define('sl-breadcrumb-item'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-breadcrumb-item': SlBreadcrumbItem; + } +} diff --git a/src/components/breadcrumb/breadcrumb.component.ts b/src/components/breadcrumb/breadcrumb.component.ts index 36a0695038..fb481aca5c 100644 --- a/src/components/breadcrumb/breadcrumb.component.ts +++ b/src/components/breadcrumb/breadcrumb.component.ts @@ -98,9 +98,3 @@ export default class SlBreadcrumb extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-breadcrumb': SlBreadcrumb; - } -} diff --git a/src/components/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb.ts index d838e29223..19663bd61b 100644 --- a/src/components/breadcrumb/breadcrumb.ts +++ b/src/components/breadcrumb/breadcrumb.ts @@ -1,4 +1,12 @@ import SlBreadcrumb from './breadcrumb.component.js'; + export * from './breadcrumb.component.js'; export default SlBreadcrumb; + SlBreadcrumb.define('sl-breadcrumb'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-breadcrumb': SlBreadcrumb; + } +} diff --git a/src/components/button-group/button-group.component.ts b/src/components/button-group/button-group.component.ts index 4fe80f5f18..69cd90d9f5 100644 --- a/src/components/button-group/button-group.component.ts +++ b/src/components/button-group/button-group.component.ts @@ -89,9 +89,3 @@ function findButton(el: HTMLElement) { // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor) return el.closest(selector) ?? el.querySelector(selector); } - -declare global { - interface HTMLElementTagNameMap { - 'sl-button-group': SlButtonGroup; - } -} diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index e32a901d76..99f1eddd5b 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -1,4 +1,12 @@ import SlButtonGroup from './button-group.component.js'; + export * from './button-group.component.js'; export default SlButtonGroup; + SlButtonGroup.define('sl-button-group'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-button-group': SlButtonGroup; + } +} diff --git a/src/components/button/button.component.ts b/src/components/button/button.component.ts index 9f1005426a..2d2ec653af 100644 --- a/src/components/button/button.component.ts +++ b/src/components/button/button.component.ts @@ -328,9 +328,3 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon /* eslint-enable lit/binding-positions */ } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-button': SlButton; - } -} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 0aaf6667f6..2ccbdf6e7c 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -1,4 +1,12 @@ import SlButton from './button.component.js'; + export * from './button.component.js'; export default SlButton; + SlButton.define('sl-button'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-button': SlButton; + } +} diff --git a/src/components/card/card.component.ts b/src/components/card/card.component.ts index d88b3a8ec2..e9071906e4 100644 --- a/src/components/card/card.component.ts +++ b/src/components/card/card.component.ts @@ -51,9 +51,3 @@ export default class SlCard extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-card': SlCard; - } -} diff --git a/src/components/card/card.ts b/src/components/card/card.ts index 1e6cec98ae..ba603ffbad 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -1,4 +1,12 @@ import SlCard from './card.component.js'; + export * from './card.component.js'; export default SlCard; + SlCard.define('sl-card'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-card': SlCard; + } +} diff --git a/src/components/carousel-item/carousel-item.component.ts b/src/components/carousel-item/carousel-item.component.ts index 0d3ce68e4e..6b9de9ebfa 100644 --- a/src/components/carousel-item/carousel-item.component.ts +++ b/src/components/carousel-item/carousel-item.component.ts @@ -30,9 +30,3 @@ export default class SlCarouselItem extends ShoelaceElement { return html` `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-carousel-item': SlCarouselItem; - } -} diff --git a/src/components/carousel-item/carousel-item.ts b/src/components/carousel-item/carousel-item.ts index 75107e37a9..73b72b4b10 100644 --- a/src/components/carousel-item/carousel-item.ts +++ b/src/components/carousel-item/carousel-item.ts @@ -1,4 +1,12 @@ import SlCarouselItem from './carousel-item.component.js'; + export * from './carousel-item.component.js'; export default SlCarouselItem; + SlCarouselItem.define('sl-carousel-item'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-carousel-item': SlCarouselItem; + } +} diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts index 3bfe103265..1f5ae0f6f6 100644 --- a/src/components/carousel/carousel.component.ts +++ b/src/components/carousel/carousel.component.ts @@ -471,9 +471,3 @@ export default class SlCarousel extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-carousel': SlCarousel; - } -} diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 0979be32ea..e130fe5316 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -1,4 +1,12 @@ import SlCarousel from './carousel.component.js'; + export * from './carousel.component.js'; export default SlCarousel; + SlCarousel.define('sl-carousel'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-carousel': SlCarousel; + } +} diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts index dc828bbfb8..bb37a5a4e6 100644 --- a/src/components/checkbox/checkbox.component.ts +++ b/src/components/checkbox/checkbox.component.ts @@ -243,9 +243,3 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-checkbox': SlCheckbox; - } -} diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index 15bddf0ef3..2017470afa 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -1,4 +1,12 @@ import SlCheckbox from './checkbox.component.js'; + export * from './checkbox.component.js'; export default SlCheckbox; + SlCheckbox.define('sl-checkbox'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-checkbox': SlCheckbox; + } +} diff --git a/src/components/color-picker/color-picker.component.ts b/src/components/color-picker/color-picker.component.ts index 614385beac..084220ead8 100644 --- a/src/components/color-picker/color-picker.component.ts +++ b/src/components/color-picker/color-picker.component.ts @@ -1065,9 +1065,3 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-color-picker': SlColorPicker; - } -} diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index e346db40c1..298debe4f8 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -1,4 +1,12 @@ import SlColorPicker from './color-picker.component.js'; + export * from './color-picker.component.js'; export default SlColorPicker; + SlColorPicker.define('sl-color-picker'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-color-picker': SlColorPicker; + } +} diff --git a/src/components/copy-button/copy-button.component.ts b/src/components/copy-button/copy-button.component.ts index fbd8f45041..01fa39256d 100644 --- a/src/components/copy-button/copy-button.component.ts +++ b/src/components/copy-button/copy-button.component.ts @@ -249,9 +249,3 @@ setDefaultAnimation('copy.out', { ], options: { duration: 100 } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-copy-button': SlCopyButton; - } -} diff --git a/src/components/copy-button/copy-button.ts b/src/components/copy-button/copy-button.ts index 0283a1e809..858fb09e3b 100644 --- a/src/components/copy-button/copy-button.ts +++ b/src/components/copy-button/copy-button.ts @@ -1,4 +1,12 @@ import SlCopyButton from './copy-button.component.js'; + export * from './copy-button.component.js'; export default SlCopyButton; + SlCopyButton.define('sl-copy-button'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-copy-button': SlCopyButton; + } +} diff --git a/src/components/details/details.component.ts b/src/components/details/details.component.ts index 68d066812a..8d68ef7167 100644 --- a/src/components/details/details.component.ts +++ b/src/components/details/details.component.ts @@ -244,9 +244,3 @@ setDefaultAnimation('details.hide', { ], options: { duration: 250, easing: 'linear' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-details': SlDetails; - } -} diff --git a/src/components/details/details.ts b/src/components/details/details.ts index ecaf46adfd..9a7bcb01f9 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -1,4 +1,12 @@ import SlDetails from './details.component.js'; + export * from './details.component.js'; export default SlDetails; + SlDetails.define('sl-details'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-details': SlDetails; + } +} diff --git a/src/components/dialog/dialog.component.ts b/src/components/dialog/dialog.component.ts index 805f509afe..7e708db1ff 100644 --- a/src/components/dialog/dialog.component.ts +++ b/src/components/dialog/dialog.component.ts @@ -339,9 +339,3 @@ setDefaultAnimation('dialog.overlay.hide', { keyframes: [{ opacity: 1 }, { opacity: 0 }], options: { duration: 250 } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-dialog': SlDialog; - } -} diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 8eb2926fe4..e0bac3fd91 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -1,4 +1,12 @@ import SlDialog from './dialog.component.js'; + export * from './dialog.component.js'; export default SlDialog; + SlDialog.define('sl-dialog'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-dialog': SlDialog; + } +} diff --git a/src/components/divider/divider.component.ts b/src/components/divider/divider.component.ts index c2f2b4105c..fad68a033e 100644 --- a/src/components/divider/divider.component.ts +++ b/src/components/divider/divider.component.ts @@ -30,9 +30,3 @@ export default class SlDivider extends ShoelaceElement { this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal'); } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-divider': SlDivider; - } -} diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index c0f75a9530..151af03266 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -1,4 +1,12 @@ import SlDivider from './divider.component.js'; + export * from './divider.component.js'; export default SlDivider; + SlDivider.define('sl-divider'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-divider': SlDivider; + } +} diff --git a/src/components/drawer/drawer.component.ts b/src/components/drawer/drawer.component.ts index 76b3d5f72e..6ce9e885d2 100644 --- a/src/components/drawer/drawer.component.ts +++ b/src/components/drawer/drawer.component.ts @@ -459,9 +459,3 @@ setDefaultAnimation('drawer.overlay.hide', { keyframes: [{ opacity: 1 }, { opacity: 0 }], options: { duration: 250 } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-drawer': SlDrawer; - } -} diff --git a/src/components/drawer/drawer.ts b/src/components/drawer/drawer.ts index 3f5dbdc3c9..59db8a474f 100644 --- a/src/components/drawer/drawer.ts +++ b/src/components/drawer/drawer.ts @@ -1,4 +1,12 @@ import SlDrawer from './drawer.component.js'; + export * from './drawer.component.js'; export default SlDrawer; + SlDrawer.define('sl-drawer'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-drawer': SlDrawer; + } +} diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts index 76ab4feb81..d9ff479e31 100644 --- a/src/components/dropdown/dropdown.component.ts +++ b/src/components/dropdown/dropdown.component.ts @@ -436,9 +436,3 @@ setDefaultAnimation('dropdown.hide', { ], options: { duration: 100, easing: 'ease' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-dropdown': SlDropdown; - } -} diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 523243728d..a831caae3c 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -1,4 +1,12 @@ import SlDropdown from './dropdown.component.js'; + export * from './dropdown.component.js'; export default SlDropdown; + SlDropdown.define('sl-dropdown'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-dropdown': SlDropdown; + } +} diff --git a/src/components/format-bytes/format-bytes.component.ts b/src/components/format-bytes/format-bytes.component.ts index 2c6a609cc9..35952b0a49 100644 --- a/src/components/format-bytes/format-bytes.component.ts +++ b/src/components/format-bytes/format-bytes.component.ts @@ -39,9 +39,3 @@ export default class SlFormatBytes extends ShoelaceElement { }); } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-format-bytes': SlFormatBytes; - } -} diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts index 9bd6c69a51..c53973ac06 100644 --- a/src/components/format-bytes/format-bytes.ts +++ b/src/components/format-bytes/format-bytes.ts @@ -1,4 +1,12 @@ import SlFormatBytes from './format-bytes.component.js'; + export * from './format-bytes.component.js'; export default SlFormatBytes; + SlFormatBytes.define('sl-format-bytes'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-format-bytes': SlFormatBytes; + } +} diff --git a/src/components/format-date/format-date.component.ts b/src/components/format-date/format-date.component.ts index 89b8bf71d7..7c58ec365e 100644 --- a/src/components/format-date/format-date.component.ts +++ b/src/components/format-date/format-date.component.ts @@ -80,9 +80,3 @@ export default class SlFormatDate extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-format-date': SlFormatDate; - } -} diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts index eac66c6f2b..8be9b39b32 100644 --- a/src/components/format-date/format-date.ts +++ b/src/components/format-date/format-date.ts @@ -1,4 +1,12 @@ import SlFormatDate from './format-date.component.js'; + export * from './format-date.component.js'; export default SlFormatDate; + SlFormatDate.define('sl-format-date'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-format-date': SlFormatDate; + } +} diff --git a/src/components/format-number/format-number.component.ts b/src/components/format-number/format-number.component.ts index 3115aa850a..84aff8e330 100644 --- a/src/components/format-number/format-number.component.ts +++ b/src/components/format-number/format-number.component.ts @@ -59,9 +59,3 @@ export default class SlFormatNumber extends ShoelaceElement { }); } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-format-number': SlFormatNumber; - } -} diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts index 656ba5f112..8d39b7bbe7 100644 --- a/src/components/format-number/format-number.ts +++ b/src/components/format-number/format-number.ts @@ -1,4 +1,12 @@ import SlFormatNumber from './format-number.component.js'; + export * from './format-number.component.js'; export default SlFormatNumber; + SlFormatNumber.define('sl-format-number'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-format-number': SlFormatNumber; + } +} diff --git a/src/components/icon-button/icon-button.component.ts b/src/components/icon-button/icon-button.component.ts index 7c007ed1f2..268246962c 100644 --- a/src/components/icon-button/icon-button.component.ts +++ b/src/components/icon-button/icon-button.component.ts @@ -128,9 +128,3 @@ export default class SlIconButton extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-icon-button': SlIconButton; - } -} diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts index 6d83c21ada..9d4c2ecab0 100644 --- a/src/components/icon-button/icon-button.ts +++ b/src/components/icon-button/icon-button.ts @@ -1,4 +1,12 @@ import SlIconButton from './icon-button.component.js'; + export * from './icon-button.component.js'; export default SlIconButton; + SlIconButton.define('sl-icon-button'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-icon-button': SlIconButton; + } +} diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts index d9b3170d54..4f379de99a 100644 --- a/src/components/icon/icon.component.ts +++ b/src/components/icon/icon.component.ts @@ -181,9 +181,3 @@ export default class SlIcon extends ShoelaceElement { return this.svg; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-icon': SlIcon; - } -} diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 626642dac7..b50404ef50 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -1,4 +1,12 @@ import SlIcon from './icon.component.js'; + export * from './icon.component.js'; export default SlIcon; + SlIcon.define('sl-icon'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-icon': SlIcon; + } +} diff --git a/src/components/image-comparer/image-comparer.component.ts b/src/components/image-comparer/image-comparer.component.ts index 5ce2cb0a17..616e6f0afd 100644 --- a/src/components/image-comparer/image-comparer.component.ts +++ b/src/components/image-comparer/image-comparer.component.ts @@ -151,9 +151,3 @@ export default class SlImageComparer extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-image-comparer': SlImageComparer; - } -} diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts index 6202b656cb..94e0ea3ab6 100644 --- a/src/components/image-comparer/image-comparer.ts +++ b/src/components/image-comparer/image-comparer.ts @@ -1,4 +1,12 @@ import SlImageComparer from './image-comparer.component.js'; + export * from './image-comparer.component.js'; export default SlImageComparer; + SlImageComparer.define('sl-image-comparer'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-image-comparer': SlImageComparer; + } +} diff --git a/src/components/include/include.component.ts b/src/components/include/include.component.ts index a1c7dd7835..8cb21468b5 100644 --- a/src/components/include/include.component.ts +++ b/src/components/include/include.component.ts @@ -73,9 +73,3 @@ export default class SlInclude extends ShoelaceElement { return html``; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-include': SlInclude; - } -} diff --git a/src/components/include/include.ts b/src/components/include/include.ts index 196b5b80a6..adb70b9ecd 100644 --- a/src/components/include/include.ts +++ b/src/components/include/include.ts @@ -1,4 +1,12 @@ import SlInclude from './include.component.js'; + export * from './include.component.js'; export default SlInclude; + SlInclude.define('sl-include'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-include': SlInclude; + } +} diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts index 9eca10c53f..13f272e019 100644 --- a/src/components/input/input.component.ts +++ b/src/components/input/input.component.ts @@ -551,9 +551,3 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-input': SlInput; - } -} diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 2e980454d1..8a7afa8b8f 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -1,4 +1,12 @@ import SlInput from './input.component.js'; + export * from './input.component.js'; export default SlInput; + SlInput.define('sl-input'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-input': SlInput; + } +} diff --git a/src/components/menu-item/menu-item.component.ts b/src/components/menu-item/menu-item.component.ts index c2dd979852..32829dfd94 100644 --- a/src/components/menu-item/menu-item.component.ts +++ b/src/components/menu-item/menu-item.component.ts @@ -130,9 +130,3 @@ export default class SlMenuItem extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-menu-item': SlMenuItem; - } -} diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts index 9cdea14cb8..a480e587e3 100644 --- a/src/components/menu-item/menu-item.ts +++ b/src/components/menu-item/menu-item.ts @@ -1,4 +1,12 @@ import SlMenuItem from './menu-item.component.js'; + export * from './menu-item.component.js'; export default SlMenuItem; + SlMenuItem.define('sl-menu-item'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-menu-item': SlMenuItem; + } +} diff --git a/src/components/menu-label/menu-label.ts b/src/components/menu-label/menu-label.ts index 0a2eabb546..81ff1fc70c 100644 --- a/src/components/menu-label/menu-label.ts +++ b/src/components/menu-label/menu-label.ts @@ -1,4 +1,12 @@ import SlMenuLabel from './menu-label.component.js'; + export * from './menu-label.component.js'; export default SlMenuLabel; + SlMenuLabel.define('sl-menu-label'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-menu-label': SlMenuLabel; + } +} diff --git a/src/components/menu/menu.component.ts b/src/components/menu/menu.component.ts index ca2367a4c6..e7b79a2746 100644 --- a/src/components/menu/menu.component.ts +++ b/src/components/menu/menu.component.ts @@ -151,9 +151,3 @@ export default class SlMenu extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-menu': SlMenu; - } -} diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index 7702f0b0b4..a8682f9620 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -1,4 +1,12 @@ import SlMenu from './menu.component.js'; + export * from './menu.component.js'; export default SlMenu; + SlMenu.define('sl-menu'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-menu': SlMenu; + } +} diff --git a/src/components/mutation-observer/mutation-observer.component.ts b/src/components/mutation-observer/mutation-observer.component.ts index a51ae88306..61b05ce45b 100644 --- a/src/components/mutation-observer/mutation-observer.component.ts +++ b/src/components/mutation-observer/mutation-observer.component.ts @@ -111,9 +111,3 @@ export default class SlMutationObserver extends ShoelaceElement { return html` `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-mutation-observer': SlMutationObserver; - } -} diff --git a/src/components/mutation-observer/mutation-observer.ts b/src/components/mutation-observer/mutation-observer.ts index 150cbc91e4..9021ae3dac 100644 --- a/src/components/mutation-observer/mutation-observer.ts +++ b/src/components/mutation-observer/mutation-observer.ts @@ -1,4 +1,12 @@ import SlMutationObserver from './mutation-observer.component.js'; + export * from './mutation-observer.component.js'; export default SlMutationObserver; + SlMutationObserver.define('sl-mutation-observer'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-mutation-observer': SlMutationObserver; + } +} diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts index 9b6cf4e429..d92ba40622 100644 --- a/src/components/option/option.component.ts +++ b/src/components/option/option.component.ts @@ -131,9 +131,3 @@ export default class SlOption extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-option': SlOption; - } -} diff --git a/src/components/option/option.ts b/src/components/option/option.ts index 788e23266d..d249dee691 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -1,4 +1,12 @@ import SlOption from './option.component.js'; + export * from './option.component.js'; export default SlOption; + SlOption.define('sl-option'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-option': SlOption; + } +} diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts index 365622fe82..3ab4c0d10d 100644 --- a/src/components/popup/popup.component.ts +++ b/src/components/popup/popup.component.ts @@ -471,9 +471,3 @@ export default class SlPopup extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-popup': SlPopup; - } -} diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts index 74b6076ba6..01532d21a3 100644 --- a/src/components/popup/popup.ts +++ b/src/components/popup/popup.ts @@ -1,4 +1,12 @@ import SlPopup from './popup.component.js'; + export * from './popup.component.js'; export default SlPopup; + SlPopup.define('sl-popup'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-popup': SlPopup; + } +} diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts index 693461b64b..a580226a11 100644 --- a/src/components/progress-bar/progress-bar.component.ts +++ b/src/components/progress-bar/progress-bar.component.ts @@ -61,9 +61,3 @@ export default class SlProgressBar extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-progress-bar': SlProgressBar; - } -} diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts index 993e38ce56..7bf4b56e3d 100644 --- a/src/components/progress-bar/progress-bar.ts +++ b/src/components/progress-bar/progress-bar.ts @@ -1,4 +1,12 @@ import SlProgressBar from './progress-bar.component.js'; + export * from './progress-bar.component.js'; export default SlProgressBar; + SlProgressBar.define('sl-progress-bar'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-progress-bar': SlProgressBar; + } +} diff --git a/src/components/progress-ring/progress-ring.component.ts b/src/components/progress-ring/progress-ring.component.ts index b3a118ccce..8b3af3e788 100644 --- a/src/components/progress-ring/progress-ring.component.ts +++ b/src/components/progress-ring/progress-ring.component.ts @@ -78,9 +78,3 @@ export default class SlProgressRing extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-progress-ring': SlProgressRing; - } -} diff --git a/src/components/progress-ring/progress-ring.ts b/src/components/progress-ring/progress-ring.ts index af7b545cf4..4cfd548ccb 100644 --- a/src/components/progress-ring/progress-ring.ts +++ b/src/components/progress-ring/progress-ring.ts @@ -1,4 +1,12 @@ import SlProgressRing from './progress-ring.component.js'; + export * from './progress-ring.component.js'; export default SlProgressRing; + SlProgressRing.define('sl-progress-ring'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-progress-ring': SlProgressRing; + } +} diff --git a/src/components/qr-code/qr-code.component.ts b/src/components/qr-code/qr-code.component.ts index c4366852d9..dc180dd439 100644 --- a/src/components/qr-code/qr-code.component.ts +++ b/src/components/qr-code/qr-code.component.ts @@ -80,9 +80,3 @@ export default class SlQrCode extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-qr-code': SlQrCode; - } -} diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts index df396382fd..4295206d9c 100644 --- a/src/components/qr-code/qr-code.ts +++ b/src/components/qr-code/qr-code.ts @@ -1,4 +1,12 @@ import SlQrCode from './qr-code.component.js'; + export * from './qr-code.component.js'; export default SlQrCode; + SlQrCode.define('sl-qr-code'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-qr-code': SlQrCode; + } +} diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts index ac3167a9fa..bfc1a65e4d 100644 --- a/src/components/radio-button/radio-button.component.ts +++ b/src/components/radio-button/radio-button.component.ts @@ -137,9 +137,3 @@ export default class SlRadioButton extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-radio-button': SlRadioButton; - } -} diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts index 93f82fe7a9..c158f25e80 100644 --- a/src/components/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button.ts @@ -1,4 +1,12 @@ import SlRadioButton from './radio-button.component.js'; + export * from './radio-button.component.js'; export default SlRadioButton; + SlRadioButton.define('sl-radio-button'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-radio-button': SlRadioButton; + } +} diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts index 5f6afb319a..96fea508e7 100644 --- a/src/components/radio-group/radio-group.component.ts +++ b/src/components/radio-group/radio-group.component.ts @@ -398,9 +398,3 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor /* eslint-enable lit-a11y/click-events-have-key-events */ } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-radio-group': SlRadioGroup; - } -} diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts index 37aea9d30c..6e8c4d5a0a 100644 --- a/src/components/radio-group/radio-group.ts +++ b/src/components/radio-group/radio-group.ts @@ -1,4 +1,12 @@ import SlRadioGroup from './radio-group.component.js'; + export * from './radio-group.component.js'; export default SlRadioGroup; + SlRadioGroup.define('sl-radio-group'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-radio-group': SlRadioGroup; + } +} diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index ff0918c338..774ef7288f 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -1,4 +1,12 @@ import SlRadio from './radio.component.js'; + export * from './radio.component.js'; export default SlRadio; + SlRadio.define('sl-radio'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-radio': SlRadio; + } +} diff --git a/src/components/range/range.component.ts b/src/components/range/range.component.ts index 40cbe998cb..09290f4f14 100644 --- a/src/components/range/range.component.ts +++ b/src/components/range/range.component.ts @@ -354,9 +354,3 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-range': SlRange; - } -} diff --git a/src/components/range/range.ts b/src/components/range/range.ts index e48cbff9f1..782c9a6879 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -1,4 +1,12 @@ import SlRange from './range.component.js'; + export * from './range.component.js'; export default SlRange; + SlRange.define('sl-range'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-range': SlRange; + } +} diff --git a/src/components/rating/rating.component.ts b/src/components/rating/rating.component.ts index ba981ce24f..b65bcafa54 100644 --- a/src/components/rating/rating.component.ts +++ b/src/components/rating/rating.component.ts @@ -307,9 +307,3 @@ export default class SlRating extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-rating': SlRating; - } -} diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index f71198df22..9c9fba7a9b 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -1,4 +1,12 @@ import SlRating from './rating.component.js'; + export * from './rating.component.js'; export default SlRating; + SlRating.define('sl-rating'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-rating': SlRating; + } +} diff --git a/src/components/relative-time/relative-time.component.ts b/src/components/relative-time/relative-time.component.ts index 315e8439ae..7ce579569a 100644 --- a/src/components/relative-time/relative-time.component.ts +++ b/src/components/relative-time/relative-time.component.ts @@ -119,9 +119,3 @@ function getTimeUntilNextUnit(unit: 'second' | 'minute' | 'hour' | 'day') { const value = units[unit]; return value - (Date.now() % value); } - -declare global { - interface HTMLElementTagNameMap { - 'sl-relative-time': SlRelativeTime; - } -} diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts index 16a024b9ab..814cb81235 100644 --- a/src/components/relative-time/relative-time.ts +++ b/src/components/relative-time/relative-time.ts @@ -1,4 +1,12 @@ import SlRelativeTime from './relative-time.component.js'; + export * from './relative-time.component.js'; export default SlRelativeTime; + SlRelativeTime.define('sl-relative-time'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-relative-time': SlRelativeTime; + } +} diff --git a/src/components/resize-observer/resize-observer.ts b/src/components/resize-observer/resize-observer.ts index 95a85e2329..1aeddddb38 100644 --- a/src/components/resize-observer/resize-observer.ts +++ b/src/components/resize-observer/resize-observer.ts @@ -1,4 +1,12 @@ import SlResizeObserver from './resize-observer.component.js'; + export * from './resize-observer.component.js'; export default SlResizeObserver; + SlResizeObserver.define('sl-resize-observer'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-resize-observer': SlResizeObserver; + } +} diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index 94b5037433..54d8098544 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -867,9 +867,3 @@ setDefaultAnimation('select.hide', { ], options: { duration: 100, easing: 'ease' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-select': SlSelect; - } -} diff --git a/src/components/select/select.ts b/src/components/select/select.ts index ec840e3db2..591162bd2d 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -1,4 +1,12 @@ import SlSelect from './select.component.js'; + export * from './select.component.js'; export default SlSelect; + SlSelect.define('sl-select'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-select': SlSelect; + } +} diff --git a/src/components/skeleton/skeleton.component.ts b/src/components/skeleton/skeleton.component.ts index 0813212c6d..ecee34a5da 100644 --- a/src/components/skeleton/skeleton.component.ts +++ b/src/components/skeleton/skeleton.component.ts @@ -39,9 +39,3 @@ export default class SlSkeleton extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-skeleton': SlSkeleton; - } -} diff --git a/src/components/skeleton/skeleton.ts b/src/components/skeleton/skeleton.ts index 2a4b90cd28..a51260a968 100644 --- a/src/components/skeleton/skeleton.ts +++ b/src/components/skeleton/skeleton.ts @@ -1,4 +1,12 @@ import SlSkeleton from './skeleton.component.js'; + export * from './skeleton.component.js'; export default SlSkeleton; + SlSkeleton.define('sl-skeleton'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-skeleton': SlSkeleton; + } +} diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts index d9868632ff..bd38aaad76 100644 --- a/src/components/spinner/spinner.component.ts +++ b/src/components/spinner/spinner.component.ts @@ -31,9 +31,3 @@ export default class SlSpinner extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-spinner': SlSpinner; - } -} diff --git a/src/components/spinner/spinner.ts b/src/components/spinner/spinner.ts index f38b25d567..dcfb584dde 100644 --- a/src/components/spinner/spinner.ts +++ b/src/components/spinner/spinner.ts @@ -1,4 +1,12 @@ import SlSpinner from './spinner.component.js'; + export * from './spinner.component.js'; export default SlSpinner; + SlSpinner.define('sl-spinner'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-spinner': SlSpinner; + } +} diff --git a/src/components/split-panel/split-panel.ts b/src/components/split-panel/split-panel.ts index a3248810bd..61722dcb63 100644 --- a/src/components/split-panel/split-panel.ts +++ b/src/components/split-panel/split-panel.ts @@ -1,4 +1,12 @@ import SlSplitPanel from './split-panel.component.js'; + export * from './split-panel.component.js'; export default SlSplitPanel; + SlSplitPanel.define('sl-split-panel'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-split-panel': SlSplitPanel; + } +} diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts index 48aed413b7..691a7d8bfd 100644 --- a/src/components/switch/switch.ts +++ b/src/components/switch/switch.ts @@ -1,4 +1,12 @@ import SlSwitch from './switch.component.js'; + export * from './switch.component.js'; export default SlSwitch; + SlSwitch.define('sl-switch'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-switch': SlSwitch; + } +} diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts index 467e033c62..d1844cc9a2 100644 --- a/src/components/tab-group/tab-group.ts +++ b/src/components/tab-group/tab-group.ts @@ -1,4 +1,12 @@ import SlTabGroup from './tab-group.component.js'; + export * from './tab-group.component.js'; export default SlTabGroup; + SlTabGroup.define('sl-tab-group'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tab-group': SlTabGroup; + } +} diff --git a/src/components/tab-panel/tab-panel.component.ts b/src/components/tab-panel/tab-panel.component.ts index 9dfed51d9e..599f7529df 100644 --- a/src/components/tab-panel/tab-panel.component.ts +++ b/src/components/tab-panel/tab-panel.component.ts @@ -55,9 +55,3 @@ export default class SlTabPanel extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-tab-panel': SlTabPanel; - } -} diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts index f997fa0f37..bdc87a08ee 100644 --- a/src/components/tab-panel/tab-panel.ts +++ b/src/components/tab-panel/tab-panel.ts @@ -1,4 +1,12 @@ import SlTabPanel from './tab-panel.component.js'; + export * from './tab-panel.component.js'; export default SlTabPanel; + SlTabPanel.define('sl-tab-panel'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tab-panel': SlTabPanel; + } +} diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 76a59c9c34..d3732817dc 100644 --- a/src/components/tab/tab.ts +++ b/src/components/tab/tab.ts @@ -1,4 +1,12 @@ import SlTab from './tab.component.js'; + export * from './tab.component.js'; export default SlTab; + SlTab.define('sl-tab'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tab': SlTab; + } +} diff --git a/src/components/tag/tag.component.ts b/src/components/tag/tag.component.ts index c355664d41..86f8ee0563 100644 --- a/src/components/tag/tag.component.ts +++ b/src/components/tag/tag.component.ts @@ -91,9 +91,3 @@ export default class SlTag extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-tag': SlTag; - } -} diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts index 197e9a981e..396f6a7b8b 100644 --- a/src/components/tag/tag.ts +++ b/src/components/tag/tag.ts @@ -1,4 +1,12 @@ import SlTag from './tag.component.js'; + export * from './tag.component.js'; export default SlTag; + SlTag.define('sl-tag'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tag': SlTag; + } +} diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts index bb4058cf29..6a4fe05d3d 100644 --- a/src/components/textarea/textarea.component.ts +++ b/src/components/textarea/textarea.component.ts @@ -383,9 +383,3 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-textarea': SlTextarea; - } -} diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 6be43a3295..0d2371c2d5 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -1,4 +1,12 @@ import SlTextarea from './textarea.component.js'; + export * from './textarea.component.js'; export default SlTextarea; + SlTextarea.define('sl-textarea'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-textarea': SlTextarea; + } +} diff --git a/src/components/tooltip/tooltip.component.ts b/src/components/tooltip/tooltip.component.ts index 4341f344be..0ef0afe0b5 100644 --- a/src/components/tooltip/tooltip.component.ts +++ b/src/components/tooltip/tooltip.component.ts @@ -291,9 +291,3 @@ setDefaultAnimation('tooltip.hide', { ], options: { duration: 150, easing: 'ease' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-tooltip': SlTooltip; - } -} diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 587b41ec8f..2e19c43fe3 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -1,4 +1,12 @@ import SlTooltip from './tooltip.component.js'; + export * from './tooltip.component.js'; export default SlTooltip; + SlTooltip.define('sl-tooltip'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tooltip': SlTooltip; + } +} diff --git a/src/components/tree-item/tree-item.component.ts b/src/components/tree-item/tree-item.component.ts index 2fed06ced4..ca471badaf 100644 --- a/src/components/tree-item/tree-item.component.ts +++ b/src/components/tree-item/tree-item.component.ts @@ -315,9 +315,3 @@ setDefaultAnimation('tree-item.collapse', { ], options: { duration: 200, easing: 'cubic-bezier(0.4, 0.0, 0.2, 1)' } }); - -declare global { - interface HTMLElementTagNameMap { - 'sl-tree-item': SlTreeItem; - } -} diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts index 2baa5aa9b3..9d74b72e7a 100644 --- a/src/components/tree-item/tree-item.ts +++ b/src/components/tree-item/tree-item.ts @@ -1,4 +1,12 @@ import SlTreeItem from './tree-item.component.js'; + export * from './tree-item.component.js'; export default SlTreeItem; + SlTreeItem.define('sl-tree-item'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tree-item': SlTreeItem; + } +} diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts index 0efaf8ee9a..65a41f38a9 100644 --- a/src/components/tree/tree.component.ts +++ b/src/components/tree/tree.component.ts @@ -420,9 +420,3 @@ export default class SlTree extends ShoelaceElement { `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-tree': SlTree; - } -} diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index 00dfef0ef5..fa42880f24 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -1,4 +1,12 @@ import SlTree from './tree.component.js'; + export * from './tree.component.js'; export default SlTree; + SlTree.define('sl-tree'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-tree': SlTree; + } +} diff --git a/src/components/visually-hidden/visually-hidden.component.ts b/src/components/visually-hidden/visually-hidden.component.ts index 28e0d46477..c93a6d56c8 100644 --- a/src/components/visually-hidden/visually-hidden.component.ts +++ b/src/components/visually-hidden/visually-hidden.component.ts @@ -18,9 +18,3 @@ export default class SlVisuallyHidden extends ShoelaceElement { return html` `; } } - -declare global { - interface HTMLElementTagNameMap { - 'sl-visually-hidden': SlVisuallyHidden; - } -} diff --git a/src/components/visually-hidden/visually-hidden.ts b/src/components/visually-hidden/visually-hidden.ts index 2d2df3e92d..feb6d061d9 100644 --- a/src/components/visually-hidden/visually-hidden.ts +++ b/src/components/visually-hidden/visually-hidden.ts @@ -1,4 +1,12 @@ import SlVisuallyHidden from './visually-hidden.component.js'; + export * from './visually-hidden.component.js'; export default SlVisuallyHidden; + SlVisuallyHidden.define('sl-visually-hidden'); + +declare global { + interface HTMLElementTagNameMap { + 'sl-visually-hidden': SlVisuallyHidden; + } +} From 8fc5f598d0dac76fac448be20faaa51d6f2533d7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 13:13:00 -0400 Subject: [PATCH 22/23] update changelog --- docs/pages/resources/changelog.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 719fd4c87b..e6b8d8c757 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -12,9 +12,9 @@ Components with the Experimental bad New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style). -## Next +## 2.7.0 -- Added the `` component [#1473] +- Added the experimental `` component [#1473] - Fixed a bug in `` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472] - Fixed a bug that caused key presses in text fields to be hijacked when used inside `` [#1492] - Fixed an upstream bug that caused React CodePen examples to stop working From 6f08f5063905a23350f0899e3d1c88a89dfa6bf0 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 11 Aug 2023 13:16:46 -0400 Subject: [PATCH 23/23] 2.7.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d3e3ae5aa..53853f7ddf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@shoelace-style/shoelace", - "version": "2.6.0", + "version": "2.7.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@shoelace-style/shoelace", - "version": "2.6.0", + "version": "2.7.0", "license": "MIT", "dependencies": { "@ctrl/tinycolor": "^3.5.0", diff --git a/package.json b/package.json index cf17694879..b1781a642f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@shoelace-style/shoelace", "description": "A forward-thinking library of web components.", - "version": "2.6.0", + "version": "2.7.0", "homepage": "https://github.com/shoelace-style/shoelace", "author": "Cory LaViska", "license": "MIT",