From 02ce4dbf4e4d964c3b35a116758cd3cd5bad36f4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 9 Feb 2024 10:12:47 -0500 Subject: [PATCH] Import styles more efficiently (#1861) * import styles more efficiently; fixes #1692 * remove scale transition --- docs/assets/styles/docs.css | 7 ------- docs/pages/resources/changelog.md | 1 + scripts/plop/templates/component/component.hbs | 2 +- src/components/alert/alert.component.ts | 3 ++- src/components/alert/alert.styles.ts | 3 --- src/components/animated-image/animated-image.component.ts | 3 ++- src/components/animated-image/animated-image.styles.ts | 3 --- src/components/animation/animation.component.ts | 3 ++- src/components/animation/animation.styles.ts | 3 --- src/components/avatar/avatar.component.ts | 3 ++- src/components/avatar/avatar.styles.ts | 3 --- src/components/badge/badge.component.ts | 3 ++- src/components/badge/badge.styles.ts | 3 --- .../breadcrumb-item/breadcrumb-item.component.ts | 3 ++- src/components/breadcrumb-item/breadcrumb-item.styles.ts | 3 --- src/components/breadcrumb/breadcrumb.component.ts | 3 ++- src/components/breadcrumb/breadcrumb.styles.ts | 3 --- src/components/button-group/button-group.component.ts | 3 ++- src/components/button-group/button-group.styles.ts | 3 --- src/components/button/button.component.ts | 3 ++- src/components/button/button.styles.ts | 3 --- src/components/card/card.component.ts | 3 ++- src/components/card/card.styles.ts | 3 --- src/components/carousel-item/carousel-item.component.ts | 3 ++- src/components/carousel-item/carousel-item.styles.ts | 3 --- src/components/carousel/carousel.component.ts | 3 ++- src/components/carousel/carousel.styles.ts | 3 --- src/components/checkbox/checkbox.component.ts | 3 ++- src/components/checkbox/checkbox.styles.ts | 5 ----- src/components/color-picker/color-picker.component.ts | 3 ++- src/components/color-picker/color-picker.styles.ts | 3 --- src/components/copy-button/copy-button.component.ts | 3 ++- src/components/copy-button/copy-button.styles.ts | 3 --- src/components/details/details.component.ts | 3 ++- src/components/details/details.styles.ts | 3 --- src/components/dialog/dialog.component.ts | 3 ++- src/components/dialog/dialog.styles.ts | 3 --- src/components/divider/divider.component.ts | 3 ++- src/components/divider/divider.styles.ts | 3 --- src/components/drawer/drawer.component.ts | 3 ++- src/components/drawer/drawer.styles.ts | 3 --- src/components/dropdown/dropdown.component.ts | 3 ++- src/components/dropdown/dropdown.styles.ts | 3 --- src/components/icon-button/icon-button.component.ts | 3 ++- src/components/icon-button/icon-button.styles.ts | 3 --- src/components/icon/icon.component.ts | 4 ++-- src/components/icon/icon.styles.ts | 3 --- src/components/image-comparer/image-comparer.component.ts | 3 ++- src/components/image-comparer/image-comparer.styles.ts | 3 --- src/components/include/include.component.ts | 3 ++- src/components/include/include.styles.ts | 3 --- src/components/input/input.component.ts | 4 +++- src/components/input/input.styles.ts | 5 ----- src/components/menu-item/menu-item.component.ts | 3 ++- src/components/menu-item/menu-item.styles.ts | 3 --- src/components/menu-label/menu-label.component.ts | 3 ++- src/components/menu-label/menu-label.styles.ts | 4 ---- src/components/menu/menu.component.ts | 4 +++- src/components/menu/menu.styles.ts | 3 --- .../mutation-observer/mutation-observer.component.ts | 3 ++- .../mutation-observer/mutation-observer.styles.ts | 3 --- src/components/option/option.component.ts | 3 ++- src/components/option/option.styles.ts | 3 --- src/components/popup/popup.component.ts | 3 ++- src/components/popup/popup.styles.ts | 3 --- src/components/progress-bar/progress-bar.component.ts | 3 ++- src/components/progress-bar/progress-bar.styles.ts | 3 --- src/components/progress-ring/progress-ring.component.ts | 3 ++- src/components/progress-ring/progress-ring.styles.ts | 3 --- src/components/qr-code/qr-code.component.ts | 3 ++- src/components/qr-code/qr-code.styles.ts | 3 --- src/components/radio-button/radio-button.component.ts | 3 ++- src/components/radio-group/radio-group.component.ts | 4 +++- src/components/radio-group/radio-group.styles.ts | 5 ----- src/components/radio/radio.component.ts | 3 ++- src/components/radio/radio.styles.ts | 3 --- src/components/range/range.component.ts | 4 +++- src/components/range/range.styles.ts | 5 ----- src/components/rating/rating.component.ts | 3 ++- src/components/rating/rating.styles.ts | 3 --- .../resize-observer/resize-observer.component.ts | 3 ++- src/components/resize-observer/resize-observer.styles.ts | 3 --- src/components/select/select.component.ts | 4 +++- src/components/select/select.styles.ts | 5 ----- src/components/skeleton/skeleton.component.ts | 3 ++- src/components/skeleton/skeleton.styles.ts | 3 --- src/components/spinner/spinner.component.ts | 3 ++- src/components/spinner/spinner.styles.ts | 3 --- src/components/split-panel/split-panel.component.ts | 3 ++- src/components/split-panel/split-panel.styles.ts | 3 --- src/components/switch/switch.component.ts | 4 +++- src/components/switch/switch.styles.ts | 5 ----- src/components/tab-group/tab-group.component.ts | 3 ++- src/components/tab-group/tab-group.styles.ts | 3 --- src/components/tab-panel/tab-panel.component.ts | 3 ++- src/components/tab-panel/tab-panel.styles.ts | 3 --- src/components/tab/tab.component.ts | 3 ++- src/components/tab/tab.styles.ts | 3 --- src/components/tag/tag.component.ts | 3 ++- src/components/tag/tag.styles.ts | 3 --- src/components/textarea/textarea.component.ts | 4 +++- src/components/textarea/textarea.styles.ts | 5 ----- src/components/tooltip/tooltip.component.ts | 3 ++- src/components/tooltip/tooltip.styles.ts | 3 --- src/components/tree-item/tree-item.component.ts | 3 ++- src/components/tree-item/tree-item.styles.ts | 3 --- src/components/tree/tree.component.ts | 3 ++- src/components/tree/tree.styles.ts | 3 --- .../visually-hidden/visually-hidden.component.ts | 3 ++- src/components/visually-hidden/visually-hidden.styles.ts | 3 --- 110 files changed, 117 insertions(+), 237 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 989a2f3989..3afdc52830 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -1059,7 +1059,6 @@ html.sidebar-open #menu-toggle { padding: 0.5rem; margin: 0; cursor: pointer; - transition: 250ms scale ease; } #theme-selector:not(:defined) { @@ -1102,12 +1101,6 @@ html.sidebar-open #menu-toggle { color: var(--sl-color-neutral-1000); } -#icon-toolbar button:hover, -#icon-toolbar a:hover, -#theme-selector sl-button:hover { - scale: 1.1; -} - #icon-toolbar a:not(:last-child), #icon-toolbar button:not(:last-child) { margin-right: 0.25rem; diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 44fceb02f3..d60367c86b 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -19,6 +19,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Added help text to `` [#1800] - Fixed a bug in `` that caused HTML tags to be included in `getTextLabel()` - Fixed a bug in `` that caused slides to not switch correctly [#1862] +- Refactored component styles to be consumed more efficiently [#1692] ## 2.13.1 diff --git a/scripts/plop/templates/component/component.hbs b/scripts/plop/templates/component/component.hbs index a5e752c766..a5b797bf78 100644 --- a/scripts/plop/templates/component/component.hbs +++ b/scripts/plop/templates/component/component.hbs @@ -24,7 +24,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --example - An example CSS custom property. */ export default class {{ properCase tag }} extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly localize = new LocalizeController(this); diff --git a/src/components/alert/alert.component.ts b/src/components/alert/alert.component.ts index 5fd0722c83..13d8e52fbe 100644 --- a/src/components/alert/alert.component.ts +++ b/src/components/alert/alert.component.ts @@ -7,6 +7,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; import styles from './alert.styles.js'; @@ -40,7 +41,7 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl * @animation alert.hide - The animation to use when hiding the alert. */ export default class SlAlert extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; private autoHideTimeout: number; diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts index eb955cdeb6..884230c5c7 100644 --- a/src/components/alert/alert.styles.ts +++ b/src/components/alert/alert.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: contents; diff --git a/src/components/animated-image/animated-image.component.ts b/src/components/animated-image/animated-image.component.ts index 9b07cc0634..c5a5747403 100644 --- a/src/components/animated-image/animated-image.component.ts +++ b/src/components/animated-image/animated-image.component.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './animated-image.styles.js'; @@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --icon-size - The size of the play/pause icons. */ export default class SlAnimatedImage extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; @query('.animated-image__animated') animatedImage: HTMLImageElement; diff --git a/src/components/animated-image/animated-image.styles.ts b/src/components/animated-image/animated-image.styles.ts index 3f326284b8..a32eda72fd 100644 --- a/src/components/animated-image/animated-image.styles.ts +++ b/src/components/animated-image/animated-image.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --control-box-size: 3rem; --icon-size: calc(var(--control-box-size) * 0.625); diff --git a/src/components/animation/animation.component.ts b/src/components/animation/animation.component.ts index 96a954e1fa..3a0d3257b8 100644 --- a/src/components/animation/animation.component.ts +++ b/src/components/animation/animation.component.ts @@ -2,6 +2,7 @@ import { animations } from './animations.js'; import { html } from 'lit'; import { property, queryAsync } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './animation.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -20,7 +21,7 @@ import type { CSSResultGroup } from 'lit'; * animate multiple elements, either wrap them in a single container or use multiple `` elements. */ export default class SlAnimation extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private animation?: Animation; private hasStarted = false; diff --git a/src/components/animation/animation.styles.ts b/src/components/animation/animation.styles.ts index 674851eea8..1ef4bf6f3e 100644 --- a/src/components/animation/animation.styles.ts +++ b/src/components/animation/animation.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: contents; } diff --git a/src/components/avatar/avatar.component.ts b/src/components/avatar/avatar.component.ts index 6a37ae5bd1..7b9285ec79 100644 --- a/src/components/avatar/avatar.component.ts +++ b/src/components/avatar/avatar.component.ts @@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { property, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './avatar.styles.js'; @@ -25,7 +26,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --size - The size of the avatar. */ export default class SlAvatar extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts index 45c27df5de..a04983ef95 100644 --- a/src/components/avatar/avatar.styles.ts +++ b/src/components/avatar/avatar.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; diff --git a/src/components/badge/badge.component.ts b/src/components/badge/badge.component.ts index 9232bf6120..7d8f262ede 100644 --- a/src/components/badge/badge.component.ts +++ b/src/components/badge/badge.component.ts @@ -1,6 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { property } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './badge.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart base - The component's base wrapper. */ export default class SlBadge extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; /** The badge's theme variant. */ @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary'; diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts index 740e6bd7f2..8da6ad1acd 100644 --- a/src/components/badge/badge.styles.ts +++ b/src/components/badge/badge.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-flex; } diff --git a/src/components/breadcrumb-item/breadcrumb-item.component.ts b/src/components/breadcrumb-item/breadcrumb-item.component.ts index 53e1a8fe31..5c81c15b0e 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.component.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.component.ts @@ -3,6 +3,7 @@ import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { property } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './breadcrumb-item.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart separator - The container that wraps the separator. */ export default class SlBreadcrumbItem extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix'); diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts index fcf1f211ca..f6c5ca60cd 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-flex; } diff --git a/src/components/breadcrumb/breadcrumb.component.ts b/src/components/breadcrumb/breadcrumb.component.ts index fb481aca5c..4f31493557 100644 --- a/src/components/breadcrumb/breadcrumb.component.ts +++ b/src/components/breadcrumb/breadcrumb.component.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './breadcrumb.styles.js'; @@ -21,7 +22,7 @@ import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js'; * @csspart base - The component's base wrapper. */ export default class SlBreadcrumb extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private readonly localize = new LocalizeController(this); diff --git a/src/components/breadcrumb/breadcrumb.styles.ts b/src/components/breadcrumb/breadcrumb.styles.ts index 8974f84ad0..86c0e16e0a 100644 --- a/src/components/breadcrumb/breadcrumb.styles.ts +++ b/src/components/breadcrumb/breadcrumb.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - .breadcrumb { display: flex; align-items: center; diff --git a/src/components/button-group/button-group.component.ts b/src/components/button-group/button-group.component.ts index 84328a78f2..0c7d1ca6b2 100644 --- a/src/components/button-group/button-group.component.ts +++ b/src/components/button-group/button-group.component.ts @@ -1,5 +1,6 @@ import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './button-group.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart base - The component's base wrapper. */ export default class SlButtonGroup extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; @query('slot') defaultSlot: HTMLSlotElement; diff --git a/src/components/button-group/button-group.styles.ts b/src/components/button-group/button-group.styles.ts index 868f5a8380..89e6de8d67 100644 --- a/src/components/button-group/button-group.styles.ts +++ b/src/components/button-group/button-group.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; } diff --git a/src/components/button/button.component.ts b/src/components/button/button.component.ts index 262dcd7220..54ecbb034a 100644 --- a/src/components/button/button.component.ts +++ b/src/components/button/button.component.ts @@ -6,6 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import SlSpinner from '../spinner/spinner.component.js'; @@ -38,7 +39,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart spinner - The spinner that shows when the button is in the loading state. */ export default class SlButton extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon, 'sl-spinner': SlSpinner diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 73016b3d04..c69ef20052 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; position: relative; diff --git a/src/components/card/card.component.ts b/src/components/card/card.component.ts index e9071906e4..3890cd98eb 100644 --- a/src/components/card/card.component.ts +++ b/src/components/card/card.component.ts @@ -1,6 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './card.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -28,7 +29,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --padding - The padding to use for the card's sections. */ export default class SlCard extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image'); diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index b334c1265e..9671516c85 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --border-color: var(--sl-color-neutral-200); --border-radius: var(--sl-border-radius-medium); diff --git a/src/components/carousel-item/carousel-item.component.ts b/src/components/carousel-item/carousel-item.component.ts index 274c5f597e..7ef2ba1677 100644 --- a/src/components/carousel-item/carousel-item.component.ts +++ b/src/components/carousel-item/carousel-item.component.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './carousel-item.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit'; * */ export default class SlCarouselItem extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; connectedCallback() { super.connectedCallback(); diff --git a/src/components/carousel-item/carousel-item.styles.ts b/src/components/carousel-item/carousel-item.styles.ts index 4a5053746a..11e07af3c1 100644 --- a/src/components/carousel-item/carousel-item.styles.ts +++ b/src/components/carousel-item/carousel-item.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --aspect-ratio: inherit; diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts index 34d097eab7..21f47bd709 100644 --- a/src/components/carousel/carousel.component.ts +++ b/src/components/carousel/carousel.component.ts @@ -11,6 +11,7 @@ import { prefersReducedMotion } from '../../internal/animate.js'; import { range } from 'lit/directives/range.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './carousel.styles.js'; @@ -47,7 +48,7 @@ import type SlCarouselItem from '../carousel-item/carousel-item.component.js'; * partially visible as a scroll hint. */ export default class SlCarousel extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; /** When set, allows the user to navigate the carousel in the same direction indefinitely. */ diff --git a/src/components/carousel/carousel.styles.ts b/src/components/carousel/carousel.styles.ts index a26c944638..33ee20eb3e 100644 --- a/src/components/carousel/carousel.styles.ts +++ b/src/components/carousel/carousel.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --slide-gap: var(--sl-spacing-medium, 1rem); --aspect-ratio: 16 / 9; diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts index 98f138475d..903d13f030 100644 --- a/src/components/checkbox/checkbox.component.ts +++ b/src/components/checkbox/checkbox.component.ts @@ -7,6 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './checkbox.styles.js'; @@ -40,7 +41,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart form-control-help-text - The help text's wrapper. */ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private readonly formControlController = new FormControlController(this, { diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index 7753b41cd0..7dc0eceb05 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { display: inline-block; } diff --git a/src/components/color-picker/color-picker.component.ts b/src/components/color-picker/color-picker.component.ts index ae361e1d31..a56aebfa15 100644 --- a/src/components/color-picker/color-picker.component.ts +++ b/src/components/color-picker/color-picker.component.ts @@ -10,6 +10,7 @@ import { property, query, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; import { TinyColor } from '@ctrl/tinycolor'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlButton from '../button/button.component.js'; import SlButtonGroup from '../button-group/button-group.component.js'; @@ -90,7 +91,7 @@ declare const EyeDropper: EyeDropperConstructor; * @cssproperty --swatch-size - The size of each predefined color swatch. */ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-button-group': SlButtonGroup, diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts index 88d78189f6..364b67611e 100644 --- a/src/components/color-picker/color-picker.styles.ts +++ b/src/components/color-picker/color-picker.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --grid-width: 280px; --grid-height: 200px; diff --git a/src/components/copy-button/copy-button.component.ts b/src/components/copy-button/copy-button.component.ts index 84e3921bf6..cdcbbd80de 100644 --- a/src/components/copy-button/copy-button.component.ts +++ b/src/components/copy-button/copy-button.component.ts @@ -3,6 +3,7 @@ import { getAnimation, setDefaultAnimation } from '../../utilities/animation-reg import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import SlTooltip from '../tooltip/tooltip.component.js'; @@ -41,7 +42,7 @@ import type { CSSResultGroup } from 'lit'; * @animation copy.out - The animation to use when feedback icons animate out. */ export default class SlCopyButton extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon, 'sl-tooltip': SlTooltip diff --git a/src/components/copy-button/copy-button.styles.ts b/src/components/copy-button/copy-button.styles.ts index 29cd4cfb61..17f4ddb6df 100644 --- a/src/components/copy-button/copy-button.styles.ts +++ b/src/components/copy-button/copy-button.styles.ts @@ -1,9 +1,6 @@ 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); diff --git a/src/components/details/details.component.ts b/src/components/details/details.component.ts index d8b83a43cf..4e9df5c943 100644 --- a/src/components/details/details.component.ts +++ b/src/components/details/details.component.ts @@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './details.styles.js'; @@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit'; * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation. */ export default class SlDetails extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts index 9f77a5519e..2fdb0e136a 100644 --- a/src/components/details/details.styles.ts +++ b/src/components/details/details.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: block; } diff --git a/src/components/dialog/dialog.component.ts b/src/components/dialog/dialog.component.ts index d55a07c3c7..0d6c5505de 100644 --- a/src/components/dialog/dialog.component.ts +++ b/src/components/dialog/dialog.component.ts @@ -9,6 +9,7 @@ import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js import { property, query } from 'lit/decorators.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import Modal from '../../internal/modal.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; @@ -66,7 +67,7 @@ import type { CSSResultGroup } from 'lit'; * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */ export default class SlDialog extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts index 8202a892cf..bf8a035238 100644 --- a/src/components/dialog/dialog.styles.ts +++ b/src/components/dialog/dialog.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --width: 31rem; --header-spacing: var(--sl-spacing-large); diff --git a/src/components/divider/divider.component.ts b/src/components/divider/divider.component.ts index fad68a033e..d6a6b4be32 100644 --- a/src/components/divider/divider.component.ts +++ b/src/components/divider/divider.component.ts @@ -1,5 +1,6 @@ import { property } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './divider.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -15,7 +16,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --spacing - The spacing of the divider. */ export default class SlDivider extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; /** Draws the divider in a vertical orientation. */ @property({ type: Boolean, reflect: true }) vertical = false; diff --git a/src/components/divider/divider.styles.ts b/src/components/divider/divider.styles.ts index 8c75096119..ac44b6287b 100644 --- a/src/components/divider/divider.styles.ts +++ b/src/components/divider/divider.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --color: var(--sl-panel-border-color); --width: var(--sl-panel-border-width); diff --git a/src/components/drawer/drawer.component.ts b/src/components/drawer/drawer.component.ts index fa08c4728a..1936514315 100644 --- a/src/components/drawer/drawer.component.ts +++ b/src/components/drawer/drawer.component.ts @@ -10,6 +10,7 @@ import { property, query } from 'lit/decorators.js'; import { uppercaseFirstLetter } from '../../internal/string.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import Modal from '../../internal/modal.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; @@ -74,7 +75,7 @@ import type { CSSResultGroup } from 'lit'; * the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. */ export default class SlDrawer extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; private readonly hasSlotController = new HasSlotController(this, 'footer'); diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts index 99b49c242d..bce0f03f7d 100644 --- a/src/components/drawer/drawer.styles.ts +++ b/src/components/drawer/drawer.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --size: 25rem; --header-spacing: var(--sl-spacing-large); diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts index 2d8f778a49..84bdcf899a 100644 --- a/src/components/dropdown/dropdown.component.ts +++ b/src/components/dropdown/dropdown.component.ts @@ -7,6 +7,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlPopup from '../popup/popup.component.js'; import styles from './dropdown.styles.js'; @@ -40,7 +41,7 @@ import type SlMenu from '../menu/menu.js'; * @animation dropdown.hide - The animation to use when hiding the dropdown. */ export default class SlDropdown extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-popup': SlPopup }; @query('.dropdown') popup: SlPopup; diff --git a/src/components/dropdown/dropdown.styles.ts b/src/components/dropdown/dropdown.styles.ts index 79b7498190..30f387a30b 100644 --- a/src/components/dropdown/dropdown.styles.ts +++ b/src/components/dropdown/dropdown.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; } diff --git a/src/components/icon-button/icon-button.component.ts b/src/components/icon-button/icon-button.component.ts index 268246962c..587f19a3f1 100644 --- a/src/components/icon-button/icon-button.component.ts +++ b/src/components/icon-button/icon-button.component.ts @@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html, literal } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { property, query, state } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './icon-button.styles.js'; @@ -21,7 +22,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart base - The component's base wrapper. */ export default class SlIconButton extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement; diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts index fadb11d909..6414cc7a8b 100644 --- a/src/components/icon-button/icon-button.styles.ts +++ b/src/components/icon-button/icon-button.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; color: var(--sl-color-neutral-600); diff --git a/src/components/icon/icon.component.ts b/src/components/icon/icon.component.ts index 542ede6e2d..69ee3b03b6 100644 --- a/src/components/icon/icon.component.ts +++ b/src/components/icon/icon.component.ts @@ -3,9 +3,9 @@ import { html } from 'lit'; import { isTemplateResult } from 'lit/directive-helpers.js'; import { property, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './icon.styles.js'; - import type { CSSResultGroup, HTMLTemplateResult } from 'lit'; const CACHEABLE_ERROR = Symbol(); @@ -33,7 +33,7 @@ interface IconSource { * @csspart use - The element generated when using `spriteSheet: true` */ export default class SlIcon extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private initialRender = false; diff --git a/src/components/icon/icon.styles.ts b/src/components/icon/icon.styles.ts index 85c3a19c5d..4e5503283a 100644 --- a/src/components/icon/icon.styles.ts +++ b/src/components/icon/icon.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; width: 1em; diff --git a/src/components/image-comparer/image-comparer.component.ts b/src/components/image-comparer/image-comparer.component.ts index 616e6f0afd..9f9cebf9f9 100644 --- a/src/components/image-comparer/image-comparer.component.ts +++ b/src/components/image-comparer/image-comparer.component.ts @@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './image-comparer.styles.js'; @@ -35,7 +36,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --handle-size - The size of the compare handle. */ export default class SlImageComparer extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static scopedElement = { 'sl-icon': SlIcon }; private readonly localize = new LocalizeController(this); diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts index 0571c96e7c..d9f45f9389 100644 --- a/src/components/image-comparer/image-comparer.styles.ts +++ b/src/components/image-comparer/image-comparer.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --divider-width: 2px; --handle-size: 2.5rem; diff --git a/src/components/include/include.component.ts b/src/components/include/include.component.ts index 8cb21468b5..d4dbb2aba4 100644 --- a/src/components/include/include.component.ts +++ b/src/components/include/include.component.ts @@ -2,6 +2,7 @@ import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { requestInclude } from './request.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './include.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @event {{ status: number }} sl-error - Emitted when the included file fails to load due to an error. */ export default class SlInclude extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; /** * The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as diff --git a/src/components/include/include.styles.ts b/src/components/include/include.styles.ts index 1775f7f7ea..940a1557bb 100644 --- a/src/components/include/include.styles.ts +++ b/src/components/include/include.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: block; } diff --git a/src/components/input/input.component.ts b/src/components/input/input.component.ts index 53d619df83..8408396979 100644 --- a/src/components/input/input.component.ts +++ b/src/components/input/input.component.ts @@ -8,6 +8,8 @@ import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './input.styles.js'; @@ -49,7 +51,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart suffix - The container that wraps the suffix. */ export default class SlInput extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private readonly formControlController = new FormControlController(this, { diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index f1fdff470d..ba7415dacf 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { display: block; } diff --git a/src/components/menu-item/menu-item.component.ts b/src/components/menu-item/menu-item.component.ts index adb492b79f..c228f574cc 100644 --- a/src/components/menu-item/menu-item.component.ts +++ b/src/components/menu-item/menu-item.component.ts @@ -5,6 +5,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { SubmenuController } from './submenu-controller.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import SlPopup from '../popup/popup.component.js'; @@ -39,7 +40,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu. */ export default class SlMenuItem extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon, 'sl-popup': SlPopup, diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index b8afd7a1af..91899489b6 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --submenu-offset: -2px; diff --git a/src/components/menu-label/menu-label.component.ts b/src/components/menu-label/menu-label.component.ts index 1a8d4b8f8b..4ff7881bdd 100644 --- a/src/components/menu-label/menu-label.component.ts +++ b/src/components/menu-label/menu-label.component.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './menu-label.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -14,7 +15,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart base - The component's base wrapper. */ export default class SlMenuLabel extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; render() { return html` `; diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts index 1e2bafb241..e2fe0c4bba 100644 --- a/src/components/menu-label/menu-label.styles.ts +++ b/src/components/menu-label/menu-label.styles.ts @@ -1,9 +1,5 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; - export default css` - ${componentStyles} - :host { display: block; } diff --git a/src/components/menu/menu.component.ts b/src/components/menu/menu.component.ts index 879d033dd1..c37e2ad9f5 100644 --- a/src/components/menu/menu.component.ts +++ b/src/components/menu/menu.component.ts @@ -1,9 +1,11 @@ import { html } from 'lit'; import { query } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './menu.styles.js'; import type { CSSResultGroup } from 'lit'; import type SlMenuItem from '../menu-item/menu-item.component.js'; + export interface MenuSelectEventDetail { item: SlMenuItem; } @@ -19,7 +21,7 @@ export interface MenuSelectEventDetail { * @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected. */ export default class SlMenu extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; @query('slot') defaultSlot: HTMLSlotElement; diff --git a/src/components/menu/menu.styles.ts b/src/components/menu/menu.styles.ts index d5d0fe74a8..a01743eb0e 100644 --- a/src/components/menu/menu.styles.ts +++ b/src/components/menu/menu.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: block; position: relative; diff --git a/src/components/mutation-observer/mutation-observer.component.ts b/src/components/mutation-observer/mutation-observer.component.ts index 85ed39e7b4..f78a9cf988 100644 --- a/src/components/mutation-observer/mutation-observer.component.ts +++ b/src/components/mutation-observer/mutation-observer.component.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './mutation-observer.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @slot - The content to watch for mutations. */ export default class SlMutationObserver extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private mutationObserver: MutationObserver; diff --git a/src/components/mutation-observer/mutation-observer.styles.ts b/src/components/mutation-observer/mutation-observer.styles.ts index 674851eea8..1ef4bf6f3e 100644 --- a/src/components/mutation-observer/mutation-observer.styles.ts +++ b/src/components/mutation-observer/mutation-observer.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: contents; } diff --git a/src/components/option/option.component.ts b/src/components/option/option.component.ts index 8ae60e1839..a9d35b50d6 100644 --- a/src/components/option/option.component.ts +++ b/src/components/option/option.component.ts @@ -3,6 +3,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './option.styles.js'; @@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart suffix - The container that wraps the suffix. */ export default class SlOption extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private cachedTextLabel: string; diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts index 8304ab4246..146c7cbf1a 100644 --- a/src/components/option/option.styles.ts +++ b/src/components/option/option.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: block; user-select: none; diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts index 53ff039bb3..dd7e524c1c 100644 --- a/src/components/popup/popup.component.ts +++ b/src/components/popup/popup.component.ts @@ -3,6 +3,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { offsetParent } from 'composed-offset-position'; import { property, query } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './popup.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -45,7 +46,7 @@ function isVirtualElement(e: unknown): e is VirtualElement { * available when using `auto-size`. */ export default class SlPopup extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private anchorEl: Element | VirtualElement | null; private cleanup: ReturnType | undefined; diff --git a/src/components/popup/popup.styles.ts b/src/components/popup/popup.styles.ts index c1d1612770..c278707aa9 100644 --- a/src/components/popup/popup.styles.ts +++ b/src/components/popup/popup.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --arrow-color: var(--sl-color-neutral-1000); --arrow-size: 6px; diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts index a580226a11..e0ec6fffad 100644 --- a/src/components/progress-bar/progress-bar.component.ts +++ b/src/components/progress-bar/progress-bar.component.ts @@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { property } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './progress-bar.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -26,7 +27,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --label-color - The color of the label. */ export default class SlProgressBar extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly localize = new LocalizeController(this); /** The current progress as a percentage, 0 to 100. */ diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts index 26fb0c0616..f300cf0e88 100644 --- a/src/components/progress-bar/progress-bar.styles.ts +++ b/src/components/progress-bar/progress-bar.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --height: 1rem; --track-color: var(--sl-color-neutral-200); diff --git a/src/components/progress-ring/progress-ring.component.ts b/src/components/progress-ring/progress-ring.component.ts index 8b3af3e788..fffd900dba 100644 --- a/src/components/progress-ring/progress-ring.component.ts +++ b/src/components/progress-ring/progress-ring.component.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './progress-ring.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -24,7 +25,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes. */ export default class SlProgressRing extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly localize = new LocalizeController(this); diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts index 590f0e499a..de71c6c8fb 100644 --- a/src/components/progress-ring/progress-ring.styles.ts +++ b/src/components/progress-ring/progress-ring.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --size: 128px; --track-width: 4px; diff --git a/src/components/qr-code/qr-code.component.ts b/src/components/qr-code/qr-code.component.ts index f5dd4c81f4..f28ab50bb6 100644 --- a/src/components/qr-code/qr-code.component.ts +++ b/src/components/qr-code/qr-code.component.ts @@ -2,6 +2,7 @@ import { html } from 'lit'; import { property, query } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import QrCreator from 'qr-creator'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './qr-code.styles.js'; @@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart base - The component's base wrapper. */ export default class SlQrCode extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; @query('canvas') canvas: HTMLElement; diff --git a/src/components/qr-code/qr-code.styles.ts b/src/components/qr-code/qr-code.styles.ts index af9afa4e64..aa50921f39 100644 --- a/src/components/qr-code/qr-code.styles.ts +++ b/src/components/qr-code/qr-code.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; } diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts index bfc1a65e4d..773dd16dcf 100644 --- a/src/components/radio-button/radio-button.component.ts +++ b/src/components/radio-button/radio-button.component.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './radio-button.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -29,7 +30,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart suffix - The container that wraps the suffix. */ export default class SlRadioButton extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix'); diff --git a/src/components/radio-group/radio-group.component.ts b/src/components/radio-group/radio-group.component.ts index 35db49fd1c..b066340d37 100644 --- a/src/components/radio-group/radio-group.component.ts +++ b/src/components/radio-group/radio-group.component.ts @@ -9,6 +9,8 @@ import { HasSlotController } from '../../internal/slot.js'; import { html } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlButtonGroup from '../button-group/button-group.component.js'; import styles from './radio-group.styles.js'; @@ -42,7 +44,7 @@ import type SlRadioButton from '../radio-button/radio-button.js'; * @csspart button-group__base - The button group's `base` part. */ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static dependencies = { 'sl-button-group': SlButtonGroup }; protected readonly formControlController = new FormControlController(this); diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts index 0fcc26589e..3cfcf3bb22 100644 --- a/src/components/radio-group/radio-group.styles.ts +++ b/src/components/radio-group/radio-group.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { display: block; } diff --git a/src/components/radio/radio.component.ts b/src/components/radio/radio.component.ts index 888939231a..30323e40cc 100644 --- a/src/components/radio/radio.component.ts +++ b/src/components/radio/radio.component.ts @@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { property, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './radio.styles.js'; @@ -27,7 +28,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart label - The container that wraps the radio's label. */ export default class SlRadio extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; @state() checked = false; diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts index a9c0f69797..34e5eebb69 100644 --- a/src/components/radio/radio.styles.ts +++ b/src/components/radio/radio.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: block; } diff --git a/src/components/range/range.component.ts b/src/components/range/range.component.ts index 09290f4f14..a336ceeaf9 100644 --- a/src/components/range/range.component.ts +++ b/src/components/range/range.component.ts @@ -8,6 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { LocalizeController } from '../../utilities/localize.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './range.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -44,7 +46,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @cssproperty --track-active-offset - The point of origin of the active track. */ export default class SlRange extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; private readonly formControlController = new FormControlController(this); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index b42370d761..438108b19c 100644 --- a/src/components/range/range.styles.ts +++ b/src/components/range/range.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { --thumb-size: 20px; --tooltip-offset: 10px; diff --git a/src/components/rating/rating.component.ts b/src/components/rating/rating.component.ts index b65bcafa54..a00c28704d 100644 --- a/src/components/rating/rating.component.ts +++ b/src/components/rating/rating.component.ts @@ -6,6 +6,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { styleMap } from 'lit/directives/style-map.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import styles from './rating.styles.js'; @@ -32,7 +33,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --symbol-spacing - The spacing to use around symbols. */ export default class SlRating extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon': SlIcon }; private readonly localize = new LocalizeController(this); diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index d01360c2ce..ed57fd8423 100644 --- a/src/components/rating/rating.styles.ts +++ b/src/components/rating/rating.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --symbol-color: var(--sl-color-neutral-300); --symbol-color-active: var(--sl-color-amber-500); diff --git a/src/components/resize-observer/resize-observer.component.ts b/src/components/resize-observer/resize-observer.component.ts index 26db868909..bb2f24680a 100644 --- a/src/components/resize-observer/resize-observer.component.ts +++ b/src/components/resize-observer/resize-observer.component.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './resize-observer.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -16,7 +17,7 @@ import type { CSSResultGroup } from 'lit'; * @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the element is resized. */ export default class SlResizeObserver extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private resizeObserver: ResizeObserver; private observedElements: HTMLElement[] = []; diff --git a/src/components/resize-observer/resize-observer.styles.ts b/src/components/resize-observer/resize-observer.styles.ts index 674851eea8..1ef4bf6f3e 100644 --- a/src/components/resize-observer/resize-observer.styles.ts +++ b/src/components/resize-observer/resize-observer.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: contents; } diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts index b103d7409e..44f18cac48 100644 --- a/src/components/select/select.component.ts +++ b/src/components/select/select.component.ts @@ -11,6 +11,8 @@ import { scrollIntoView } from '../../internal/scroll.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIcon from '../icon/icon.component.js'; import SlPopup from '../popup/popup.component.js'; @@ -67,7 +69,7 @@ import type SlOption from '../option/option.component.js'; * @csspart expand-icon - The container that wraps the expand icon. */ export default class SlSelect extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; static dependencies = { 'sl-icon': SlIcon, 'sl-popup': SlPopup, diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 7b247049fd..991cc4921d 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { display: block; } diff --git a/src/components/skeleton/skeleton.component.ts b/src/components/skeleton/skeleton.component.ts index ecee34a5da..0ef1d39e46 100644 --- a/src/components/skeleton/skeleton.component.ts +++ b/src/components/skeleton/skeleton.component.ts @@ -1,6 +1,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { property } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './skeleton.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -19,7 +20,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state. */ export default class SlSkeleton extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; /** Determines which effect the skeleton will use. */ @property() effect: 'pulse' | 'sheen' | 'none' = 'none'; diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts index 7e4279142c..59ae461b1d 100644 --- a/src/components/skeleton/skeleton.styles.ts +++ b/src/components/skeleton/skeleton.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --border-radius: var(--sl-border-radius-pill); --color: var(--sl-color-neutral-200); diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts index bd38aaad76..2422639a76 100644 --- a/src/components/spinner/spinner.component.ts +++ b/src/components/spinner/spinner.component.ts @@ -1,5 +1,6 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './spinner.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -18,7 +19,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle. */ export default class SlSpinner extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly localize = new LocalizeController(this); diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts index 76384b2796..4699b0fa0b 100644 --- a/src/components/spinner/spinner.styles.ts +++ b/src/components/spinner/spinner.styles.ts @@ -1,5 +1,4 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; // Resizing a spinner element using anything but font-size will break the animation because the animation uses em units. // Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and @@ -7,8 +6,6 @@ import componentStyles from '../../styles/component.styles.js'; // according to its actual dimensions. export default css` - ${componentStyles} - :host { --track-width: 2px; --track-color: rgb(128 128 128 / 25%); diff --git a/src/components/split-panel/split-panel.component.ts b/src/components/split-panel/split-panel.component.ts index c8b658c494..2154e7721f 100644 --- a/src/components/split-panel/split-panel.component.ts +++ b/src/components/split-panel/split-panel.component.ts @@ -5,6 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './split-panel.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -33,7 +34,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty [--max=100%] - The maximum allowed size of the primary panel. */ export default class SlSplitPanel extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private cachedPositionInPixels: number; private readonly localize = new LocalizeController(this); diff --git a/src/components/split-panel/split-panel.styles.ts b/src/components/split-panel/split-panel.styles.ts index ff5ae25019..7ccc408e12 100644 --- a/src/components/split-panel/split-panel.styles.ts +++ b/src/components/split-panel/split-panel.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --divider-width: 4px; --divider-hit-area: 12px; diff --git a/src/components/switch/switch.component.ts b/src/components/switch/switch.component.ts index f4f263fa05..d6600cbd1e 100644 --- a/src/components/switch/switch.component.ts +++ b/src/components/switch/switch.component.ts @@ -7,6 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './switch.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -38,7 +40,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @cssproperty --thumb-size - The size of the thumb. */ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormControl { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, formControlStyles, styles]; private readonly formControlController = new FormControlController(this, { value: (control: SlSwitch) => (control.checked ? control.value || 'on' : undefined), diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index 5ab74120de..5ef6f6367d 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -1,11 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; -import formControlStyles from '../../styles/form-control.styles.js'; export default css` - ${componentStyles} - ${formControlStyles} - :host { display: inline-block; } diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index 27ecf18a34..5b592044b9 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -4,6 +4,7 @@ import { LocalizeController } from '../../utilities/localize.js'; import { property, query, state } from 'lit/decorators.js'; import { scrollIntoView } from '../../internal/scroll.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; import styles from './tab-group.styles.js'; @@ -40,7 +41,7 @@ import type SlTabPanel from '../tab-panel/tab-panel.js'; * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels). */ export default class SlTabGroup extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; private readonly localize = new LocalizeController(this); diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts index ad776add79..7180ec331e 100644 --- a/src/components/tab-group/tab-group.styles.ts +++ b/src/components/tab-group/tab-group.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --indicator-color: var(--sl-color-primary-600); --track-color: var(--sl-color-neutral-200); diff --git a/src/components/tab-panel/tab-panel.component.ts b/src/components/tab-panel/tab-panel.component.ts index 599f7529df..7f18b219be 100644 --- a/src/components/tab-panel/tab-panel.component.ts +++ b/src/components/tab-panel/tab-panel.component.ts @@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './tab-panel.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -21,7 +22,7 @@ let id = 0; * @cssproperty --padding - The tab panel's padding. */ export default class SlTabPanel extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; private readonly attrId = ++id; private readonly componentId = `sl-tab-panel-${this.attrId}`; diff --git a/src/components/tab-panel/tab-panel.styles.ts b/src/components/tab-panel/tab-panel.styles.ts index dfec6b308b..e0c9f21426 100644 --- a/src/components/tab-panel/tab-panel.styles.ts +++ b/src/components/tab-panel/tab-panel.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { --padding: 0; diff --git a/src/components/tab/tab.component.ts b/src/components/tab/tab.component.ts index b418c390b8..1aa14fc8b4 100644 --- a/src/components/tab/tab.component.ts +++ b/src/components/tab/tab.component.ts @@ -3,6 +3,7 @@ import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property, query } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; import styles from './tab.styles.js'; @@ -27,7 +28,7 @@ let id = 0; * @csspart close-button__base - The close button's exported `base` part. */ export default class SlTab extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; private readonly localize = new LocalizeController(this); diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts index 6478e9e106..e2e1e3a0c6 100644 --- a/src/components/tab/tab.styles.ts +++ b/src/components/tab/tab.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; } diff --git a/src/components/tag/tag.component.ts b/src/components/tag/tag.component.ts index 86f8ee0563..f7334e0555 100644 --- a/src/components/tag/tag.component.ts +++ b/src/components/tag/tag.component.ts @@ -2,6 +2,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize.js'; import { property } from 'lit/decorators.js'; +import componentStyles from '../../styles/component.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import SlIconButton from '../icon-button/icon-button.component.js'; import styles from './tag.styles.js'; @@ -25,7 +26,7 @@ import type { CSSResultGroup } from 'lit'; * @csspart remove-button__base - The remove button's exported `base` part. */ export default class SlTag extends ShoelaceElement { - static styles: CSSResultGroup = styles; + static styles: CSSResultGroup = [componentStyles, styles]; static dependencies = { 'sl-icon-button': SlIconButton }; private readonly localize = new LocalizeController(this); diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts index 352cb19fd9..5349d7280d 100644 --- a/src/components/tag/tag.styles.ts +++ b/src/components/tag/tag.styles.ts @@ -1,9 +1,6 @@ import { css } from 'lit'; -import componentStyles from '../../styles/component.styles.js'; export default css` - ${componentStyles} - :host { display: inline-block; } diff --git a/src/components/textarea/textarea.component.ts b/src/components/textarea/textarea.component.ts index 27eccc1858..f4c6e0f43a 100644 --- a/src/components/textarea/textarea.component.ts +++ b/src/components/textarea/textarea.component.ts @@ -7,6 +7,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { property, query, state } from 'lit/decorators.js'; import { watch } from '../../internal/watch.js'; +import componentStyles from '../../styles/component.styles.js'; +import formControlStyles from '../../styles/form-control.styles.js'; import ShoelaceElement from '../../internal/shoelace-element.js'; import styles from './textarea.styles.js'; import type { CSSResultGroup } from 'lit'; @@ -35,7 +37,7 @@ import type { ShoelaceFormControl } from '../../internal/shoelace-element.js'; * @csspart textarea - The internal `