fix: use ...styles / CSSResult[] everywhere for types consistency

.changeset/silver-mayflies-dance.md

@@ -0,0 +1,14 @@
+---
+'@lion/checkbox-group': patch
+'@lion/combobox': patch
+'@lion/form-core': patch
+'@lion/input-amount': patch
+'@lion/input-stepper': patch
+'@lion/listbox': patch
+'@lion/overlays': patch
+'@lion/switch': patch
+'@lion/textarea': patch
+'@lion/tooltip': patch
+---
+
+Always use ...styles and [css``] everywhere consistently, meaning an array of CSSResult. Makes it easier on TSC.

docs/blog/ing-open-sources-lion.md

@@ -156,7 +156,7 @@ import { LionTabs } from '@lion/tabs';
 export class LeaTabs extends LionTabs {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         /* my stylings */
       `,

docs/components/content/tabs/src/lea-tabs.js

@@ -4,7 +4,7 @@ import { LionTabs } from '@lion/tabs';
 export class LeaTabs extends LionTabs {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           background: #222;

docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js

@@ -15,7 +15,7 @@ export class GhOption extends LionOption {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           display: flex;
@@ -118,7 +118,7 @@ export class GhCombobox extends LionCombobox {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         /** @configure LionCombobox */
 

docs/components/inputs/combobox/src/md-combobox/md-combobox.js

@@ -9,7 +9,7 @@ import './style/load-roboto.js';
 export class MdOption extends LionOption {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           position: relative;
@@ -69,7 +69,7 @@ customElements.define('md-option', MdOption);
 export class MdCombobox extends MdFieldMixin(LionCombobox) {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         .input-group__container {
           display: flex;

docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js

@@ -17,7 +17,7 @@ class WaOption extends LionOption {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           --background-default: white;
@@ -287,7 +287,7 @@ customElements.define('wa-option', WaOption);
 class WaCombobox extends LionCombobox {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           font-family: SF Pro Text, SF Pro Icons, system, -apple-system, system-ui,

docs/components/interaction/tooltip/features.md

@@ -170,7 +170,7 @@ export const customArrow = () => {
       class extends LionTooltip {
         static get styles() {
           return [
-            super.styles,
+            ...super.styles,
             css`
               :host {
                 --tooltip-arrow-width: 20px;

docs/guides/how-to/get-started.md

@@ -38,7 +38,7 @@ import { LionInput } from '@lion/input';
 class MyInput extends LionInput {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         /* your styles here */
       `,

packages-node/babel-plugin-extend-docs/demo/my-extension/MyExtension.js

@@ -4,7 +4,7 @@ import { MyCounter } from '../src/MyCounter.js';
 export class MyExtension extends MyCounter {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         button {
           background: #c43f16;

packages-node/providence-analytics/dashboard/src/app/components/p-table/PTable.js

@@ -17,7 +17,7 @@ export class PTable extends DecorateMixin(LitElement) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         /**
          * Structural css

packages-node/providence-analytics/dashboard/src/app/p-board.js

@@ -35,7 +35,7 @@ class PBoard extends DecorateMixin(LitElement) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       utilsStyles,
       tooltipStyles,
       css`

packages/checkbox-group/src/LionCheckboxIndeterminate.js

@@ -8,7 +8,7 @@ import { LionCheckbox } from './LionCheckbox.js';
 export class LionCheckboxIndeterminate extends LionCheckbox {
   static get styles() {
     return [
-      super.styles || [],
+      ...(super.styles || []),
       css`
         :host .choice-field__nested-checkboxes {
           display: block;

packages/combobox/docs/google-combobox/google-combobox.js

@@ -20,7 +20,7 @@ export class GoogleOption extends LinkMixin(LionOption) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host {
           position: relative;
@@ -106,7 +106,7 @@ customElements.define('google-option', GoogleOption);
 export class GoogleCombobox extends LionCombobox {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         /** @configure FormControlMixin */
 

packages/combobox/src/LionCombobox.js

@@ -37,7 +37,7 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         .input-group__input {
           display: flex;

packages/form-core/src/FormControlMixin.js

@@ -6,6 +6,7 @@ import { Unparseable } from './validate/Unparseable.js';
 /**
  * @typedef {import('@lion/core').TemplateResult} TemplateResult
  * @typedef {import('@lion/core').CSSResult} CSSResult
+ * @typedef {import('@lion/core').CSSResultArray} CSSResultArray
  * @typedef {import('@lion/core').nothing} nothing
  * @typedef {import('@lion/core/types/SlotMixinTypes').SlotsMap} SlotsMap
  * @typedef {import('../types/FormControlMixinTypes.js').FormControlMixin} FormControlMixin
@@ -618,7 +619,7 @@ const FormControlMixinImplementation = superclass =>
      */
     static get styles() {
       return [
-        super.styles || [],
+        .../** @type {CSSResultArray} */ (super.styles || []),
         css`
           /**********************
             {block} .form-field

packages/form-core/src/choice-group/ChoiceInputMixin.js

@@ -137,7 +137,7 @@ const ChoiceInputMixinImplementation = superclass =>
      */
     static get styles() {
       return [
-        super.styles || [],
+        ...(super.styles || []),
         css`
           :host {
             display: flex;

packages/input-amount/src/LionInputAmount.js

@@ -53,7 +53,7 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         .input-group__container > .input-group__input ::slotted(.form-control) {
           text-align: right;

packages/input-stepper/src/LionInputStepper.js

@@ -10,7 +10,7 @@ import { IsNumber, MinNumber, MaxNumber } from '@lion/form-core';
 export class LionInputStepper extends LionInput {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         .input-group__container > .input-group__input ::slotted(.form-control) {
           text-align: center;

packages/listbox/src/ListboxMixin.js

@@ -75,7 +75,7 @@ const ListboxMixinImplementation = superclass =>
 
     static get styles() {
       return [
-        super.styles || [],
+        ...(super.styles || []),
         css`
           :host {
             display: block;

packages/listbox/types/ListboxMixinTypes.d.ts

@@ -1,5 +1,5 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { LitElement } from '@lion/core';
+import { LitElement, CSSResultArray } from '@lion/core';
 import { SlotHost } from '@lion/core/types/SlotMixinTypes';
 
 import { FormControlHost } from '@lion/form-core/types/FormControlMixinTypes';
@@ -9,6 +9,7 @@ import { LionOptions } from '../src/LionOptions.js';
 import { LionOption } from '../src/LionOption.js';
 
 export declare class ListboxHost {
+  static get styles(): CSSResultArray;
   /**
    * When true, will synchronize activedescendant and selected element on
    * arrow key navigation.

packages/overlays/src/ArrowMixin.js

@@ -6,6 +6,7 @@ import { OverlayMixin } from './OverlayMixin.js';
  * @typedef {import('../types/ArrowMixinTypes').ArrowMixin} ArrowMixin
  * @typedef {import('@popperjs/core/lib/popper').Options} PopperOptions
  * @typedef {import('@popperjs/core/lib/enums').Placement} Placement
+ * @typedef {import('@lion/core').CSSResultArray} CSSResultArray
  */
 
 /**
@@ -26,7 +27,7 @@ export const ArrowMixinImplementation = superclass =>
 
     static get styles() {
       return [
-        super.styles || [],
+        .../** @type {CSSResultArray} */ (super.styles || []),
         css`
           :host {
             --tooltip-arrow-width: 12px;

packages/switch/src/LionSwitch.js

@@ -5,7 +5,7 @@ import { LionSwitchButton } from './LionSwitchButton.js';
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         :host([hidden]) {
           display: none;

packages/textarea/src/LionTextarea.js

@@ -149,7 +149,7 @@ export class LionTextarea extends NativeTextFieldMixin(LionFieldWithTextArea) {
 
   static get styles() {
     return [
-      super.styles,
+      ...super.styles,
       css`
         .input-group__container > .input-group__input ::slotted(.form-control) {
           overflow-x: hidden; /* for FF adds height to the TextArea to reserve place for scroll-bars */

packages/tooltip/src/LionTooltip.js

@@ -23,7 +23,7 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
 
   static get styles() {
     return [
-      super.styles ? super.styles : [],
+      ...super.styles,
       css`
         :host {
           display: inline-block;