From 4ce502f51e1387d83d5ec8fdea56cc692f4631c4 Mon Sep 17 00:00:00 2001
From: Res Marti <83967227+resmartiZH@users.noreply.github.com>
Date: Mon, 25 Nov 2024 11:23:59 +0100
Subject: [PATCH] fix: :bug: implemented font-feature-settings for all
 components (#243)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---------

Co-authored-by: Dan Büschlen <danbueschlen@gmail.com>
---
 scripts/generate-component/templates/[Name].js   | 2 +-
 scripts/generate-component/templates/[name].css  | 5 -----
 src/components/accordion/Accordion.js            | 2 +-
 src/components/accordion/accordion.css           | 7 +------
 src/components/breadcrumb/Breadcrumb.js          | 2 +-
 src/components/breadcrumb/breadcrumb.css         | 5 -----
 src/components/button-group/ButtonGroup.js       | 2 +-
 src/components/button-group/button-group.css     | 5 -----
 src/components/button/Button.js                  | 2 +-
 src/components/checkbox/Checkbox.js              | 2 +-
 src/components/checkbox/CheckboxGroup.js         | 2 +-
 src/components/chip/Chip.js                      | 2 +-
 src/components/chip/ChipGroup.js                 | 2 +-
 src/components/chip/chip.css                     | 2 --
 src/components/dialog/Dialog.js                  | 2 +-
 src/components/dialog/dialog.css                 | 5 -----
 src/components/dropdown/Dropdown.js              | 2 +-
 src/components/dropdown/dropdown.css             | 5 -----
 src/components/icon/Icon.js                      | 2 +-
 src/components/input/Input.js                    | 2 +-
 src/components/input/input.css                   | 5 -----
 src/components/menu/Menu.js                      | 2 +-
 src/components/menu/MenuItem.js                  | 2 +-
 src/components/menu/menu-item.css                | 5 -----
 src/components/menu/menu.css                     | 5 -----
 src/components/pagination/Pagination.js          | 2 +-
 src/components/popup/Popup.js                    | 2 +-
 src/components/popup/popup.css                   | 5 -----
 src/components/radio/Radio.js                    | 2 +-
 src/components/radio/RadioGroup.js               | 2 +-
 src/components/range/Range.js                    | 2 +-
 src/components/range/range.css                   | 1 -
 src/components/scroll-top/ScrollTop.js           | 2 +-
 src/components/select/Select.js                  | 2 +-
 src/components/select/select.css                 | 5 -----
 src/components/spinner/Spinner.js                | 2 +-
 src/components/table/Table.js                    | 2 +-
 src/components/visually-hidden/VisuallyHidden.js | 2 +-
 src/lib/LeuElement.js                            | 3 +++
 src/styles/common-styles.css                     | 5 +++++
 src/styles/style.stories.js                      | 1 +
 web-dev-server.config.mjs                        | 1 +
 42 files changed, 36 insertions(+), 84 deletions(-)
 create mode 100644 src/styles/common-styles.css

diff --git a/scripts/generate-component/templates/[Name].js b/scripts/generate-component/templates/[Name].js
index 0f882bc0..41e92079 100644
--- a/scripts/generate-component/templates/[Name].js
+++ b/scripts/generate-component/templates/[Name].js
@@ -8,7 +8,7 @@ import styles from "./[name].css"
  * @tagname [namespace]-[name]
  */
 export class Leu[Name] extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
diff --git a/scripts/generate-component/templates/[name].css b/scripts/generate-component/templates/[name].css
index f4e3bc00..eccb5d9c 100644
--- a/scripts/generate-component/templates/[name].css
+++ b/scripts/generate-component/templates/[name].css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --[name]-font-regular: var(--leu-font-family-regular);
   --[name]-font-black: var(--leu-font-family-black);
diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
index 5632002c..c67803ae 100644
--- a/src/components/accordion/Accordion.js
+++ b/src/components/accordion/Accordion.js
@@ -16,7 +16,7 @@ import styles from "./accordion.css"
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
 export class LeuAccordion extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {
diff --git a/src/components/accordion/accordion.css b/src/components/accordion/accordion.css
index e0d5d20d..9a6e6f70 100644
--- a/src/components/accordion/accordion.css
+++ b/src/components/accordion/accordion.css
@@ -1,10 +1,5 @@
 @import url("../../styles/custom-media.css");
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --accordion-font-regular: var(--leu-font-family-regular);
   --accordion-font-black: var(--leu-font-family-black);
@@ -19,7 +14,7 @@
 
   --transition: 0.1s ease;
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--accordion-font-regular);
 
   position: relative;
 }
diff --git a/src/components/breadcrumb/Breadcrumb.js b/src/components/breadcrumb/Breadcrumb.js
index 0154e29a..2158c040 100644
--- a/src/components/breadcrumb/Breadcrumb.js
+++ b/src/components/breadcrumb/Breadcrumb.js
@@ -55,7 +55,7 @@ export class LeuBreadcrumb extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     items: { type: Array },
diff --git a/src/components/breadcrumb/breadcrumb.css b/src/components/breadcrumb/breadcrumb.css
index 53674f6e..597f1328 100644
--- a/src/components/breadcrumb/breadcrumb.css
+++ b/src/components/breadcrumb/breadcrumb.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --breadcrumb-font-regular: var(--leu-font-family-regular);
   --breadcrumb-font-black: var(--leu-font-family-black);
diff --git a/src/components/button-group/ButtonGroup.js b/src/components/button-group/ButtonGroup.js
index 15f073fe..a7f6556c 100644
--- a/src/components/button-group/ButtonGroup.js
+++ b/src/components/button-group/ButtonGroup.js
@@ -11,7 +11,7 @@ import styles from "./button-group.css"
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   constructor() {
     super()
diff --git a/src/components/button-group/button-group.css b/src/components/button-group/button-group.css
index 12afc725..cbb1d9a4 100644
--- a/src/components/button-group/button-group.css
+++ b/src/components/button-group/button-group.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 .group {
   display: flex;
   gap: 0.5rem;
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
index a8e95f2a..890d3281 100644
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@@ -41,7 +41,7 @@ export class LeuButton extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index 9f06600f..20750a25 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -14,7 +14,7 @@ export class LeuCheckbox extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {
diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js
index 6bf54dbb..8eee7108 100644
--- a/src/components/checkbox/CheckboxGroup.js
+++ b/src/components/checkbox/CheckboxGroup.js
@@ -10,7 +10,7 @@ import styles from "./checkbox-group.css"
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },
diff --git a/src/components/chip/Chip.js b/src/components/chip/Chip.js
index 820c253d..e00d6270 100644
--- a/src/components/chip/Chip.js
+++ b/src/components/chip/Chip.js
@@ -6,7 +6,7 @@ import styles from "./chip.css"
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
 export class LeuChipBase extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {
diff --git a/src/components/chip/ChipGroup.js b/src/components/chip/ChipGroup.js
index 7d5cd57b..9fa71b66 100644
--- a/src/components/chip/ChipGroup.js
+++ b/src/components/chip/ChipGroup.js
@@ -19,7 +19,7 @@ export const SELECTION_MODES = Object.freeze({
  * @tagname leu-chip-group
  */
 export class LeuChipGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     inverted: { type: Boolean, reflect: true },
diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
index a52c45db..e5d5cd38 100644
--- a/src/components/chip/chip.css
+++ b/src/components/chip/chip.css
@@ -1,5 +1,3 @@
-:host,
-:host *,
 :host *::before,
 :host *::after {
   box-sizing: border-box;
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
index 0c28c891..a14350c8 100644
--- a/src/components/dialog/Dialog.js
+++ b/src/components/dialog/Dialog.js
@@ -19,7 +19,7 @@ export class LeuDialog extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css
index 0e6ee4ab..19138249 100644
--- a/src/components/dialog/dialog.css
+++ b/src/components/dialog/dialog.css
@@ -2,11 +2,6 @@
 
 /* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --dialog-font-regular: var(--leu-font-family-regular);
   --dialog-font-black: var(--leu-font-family-black);
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 7f3bfa8b..5adbb78b 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -23,7 +23,7 @@ export class LeuDropdown extends LeuElement {
     "leu-popup": LeuPopup,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     label: { type: String, reflect: true },
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index 7df7ba9c..58258916 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   position: relative;
 }
diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js
index 6df669e9..bcf091fe 100644
--- a/src/components/icon/Icon.js
+++ b/src/components/icon/Icon.js
@@ -17,7 +17,7 @@ import { paths } from "./paths.js"
  * @cssprop --leu-icon-size - The size of the icon.
  */
 export class LeuIcon extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     name: { type: String, reflect: true },
diff --git a/src/components/input/Input.js b/src/components/input/Input.js
index 0a2a7363..c47e400d 100644
--- a/src/components/input/Input.js
+++ b/src/components/input/Input.js
@@ -70,7 +70,7 @@ export class LeuInput extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal
diff --git a/src/components/input/input.css b/src/components/input/input.css
index d2422a00..7edf9dcb 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --input-color: var(--leu-color-black-100);
   --input-color-disabled: var(--leu-color-black-20);
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
index df820484..ebd8f9dc 100644
--- a/src/components/menu/Menu.js
+++ b/src/components/menu/Menu.js
@@ -16,7 +16,7 @@ import styles from "./menu.css"
  * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
 export class LeuMenu extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
index 8856bafe..af1561f1 100644
--- a/src/components/menu/MenuItem.js
+++ b/src/components/menu/MenuItem.js
@@ -27,7 +27,7 @@ export class LeuMenuItem extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal
diff --git a/src/components/menu/menu-item.css b/src/components/menu/menu-item.css
index 67464a70..1ff44140 100644
--- a/src/components/menu/menu-item.css
+++ b/src/components/menu/menu-item.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
index 89682faf..29c3b9f0 100644
--- a/src/components/menu/menu.css
+++ b/src/components/menu/menu.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
diff --git a/src/components/pagination/Pagination.js b/src/components/pagination/Pagination.js
index 9b3fcd03..ac033e4c 100644
--- a/src/components/pagination/Pagination.js
+++ b/src/components/pagination/Pagination.js
@@ -21,7 +21,7 @@ export class LeuPagination extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal
diff --git a/src/components/popup/Popup.js b/src/components/popup/Popup.js
index 002c7de9..2a333c35 100644
--- a/src/components/popup/Popup.js
+++ b/src/components/popup/Popup.js
@@ -20,7 +20,7 @@ import styles from "./popup.css"
  * @tagname leu-popup
  */
 export class LeuPopup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
diff --git a/src/components/popup/popup.css b/src/components/popup/popup.css
index b6db91a8..4608d193 100644
--- a/src/components/popup/popup.css
+++ b/src/components/popup/popup.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --popup-font-regular: var(--leu-font-family-regular);
   --popup-font-black: var(--leu-font-family-black);
diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
index 6879bd2d..cc453909 100644
--- a/src/components/radio/Radio.js
+++ b/src/components/radio/Radio.js
@@ -9,7 +9,7 @@ import styles from "./radio.css"
  * @tagname leu-radio
  */
 export class LeuRadio extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {
diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js
index 390b3819..e6c2d4db 100644
--- a/src/components/radio/RadioGroup.js
+++ b/src/components/radio/RadioGroup.js
@@ -10,7 +10,7 @@ import styles from "./radio-group.css"
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },
diff --git a/src/components/range/Range.js b/src/components/range/Range.js
index 996789d7..75f388e5 100644
--- a/src/components/range/Range.js
+++ b/src/components/range/Range.js
@@ -18,7 +18,7 @@ const RANGE_LABELS = ["Von", "Bis"]
  * @tagname leu-range
  */
 export class LeuRange extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
diff --git a/src/components/range/range.css b/src/components/range/range.css
index f6d179b1..4087bb3e 100644
--- a/src/components/range/range.css
+++ b/src/components/range/range.css
@@ -23,7 +23,6 @@
   --range-font-black: var(--leu-font-family-black);
 
   display: block;
-  box-sizing: border-box;
 
   font-family: var(--range-font-regular);
 }
diff --git a/src/components/scroll-top/ScrollTop.js b/src/components/scroll-top/ScrollTop.js
index 8ed41ee5..d06c86de 100644
--- a/src/components/scroll-top/ScrollTop.js
+++ b/src/components/scroll-top/ScrollTop.js
@@ -19,7 +19,7 @@ export class LeuScrollTop extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     _showButton: { state: true },
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
index b8564237..89bc40b0 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js
@@ -40,7 +40,7 @@ export class LeuSelect extends LeuElement {
     "leu-popup": LeuPopup,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static get properties() {
     return {
diff --git a/src/components/select/select.css b/src/components/select/select.css
index da17e5e0..8a001285 100644
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --select-color: var(--leu-color-black-100);
   --select-color-disabled: var(--leu-color-black-20);
diff --git a/src/components/spinner/Spinner.js b/src/components/spinner/Spinner.js
index e295f170..44c6ad86 100644
--- a/src/components/spinner/Spinner.js
+++ b/src/components/spinner/Spinner.js
@@ -9,7 +9,7 @@ import styles from "./spinner.css"
  * @cssprop --leu-spinner-size - The size of the spinner.
  */
 export class LeuSpinner extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   render() {
     return html`
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index e29dc0a9..b034648d 100644
--- a/src/components/table/Table.js
+++ b/src/components/table/Table.js
@@ -19,7 +19,7 @@ export class LeuTable extends LeuElement {
     "leu-pagination": LeuPagination,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     columns: { type: Array },
diff --git a/src/components/visually-hidden/VisuallyHidden.js b/src/components/visually-hidden/VisuallyHidden.js
index 58881825..74984b66 100644
--- a/src/components/visually-hidden/VisuallyHidden.js
+++ b/src/components/visually-hidden/VisuallyHidden.js
@@ -9,7 +9,7 @@ import styles from "./visually-hidden.css"
  * @tagname leu-visually-hidden
  */
 export class LeuVisuallyHidden extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   render() {
     return html`<slot></slot>`
diff --git a/src/lib/LeuElement.js b/src/lib/LeuElement.js
index dc2d0457..b0becf2b 100644
--- a/src/lib/LeuElement.js
+++ b/src/lib/LeuElement.js
@@ -1,10 +1,13 @@
 import { LitElement } from "lit"
+import commonStyles from "../styles/common-styles.css"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__
 
   static dependencies = {}
 
+  static styles = commonStyles
+
   static define(name, constructor = this, options = {}) {
     Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
 
diff --git a/src/styles/common-styles.css b/src/styles/common-styles.css
new file mode 100644
index 00000000..781f5fd0
--- /dev/null
+++ b/src/styles/common-styles.css
@@ -0,0 +1,5 @@
+:host,
+:host * {
+  box-sizing: border-box;
+  font-feature-settings: var(--leu-t-font-feature-settings);
+}
diff --git a/src/styles/style.stories.js b/src/styles/style.stories.js
index a8474bd2..31c64dee 100644
--- a/src/styles/style.stories.js
+++ b/src/styles/style.stories.js
@@ -17,6 +17,7 @@ function Template() {
 
         background-color: var(--leu-color-black-5);
         font-family: var(--leu-font-family-regular);
+        font-feature-settings: var(--leu-t-font-feature-settings);
       }
 
       .container div {
diff --git a/web-dev-server.config.mjs b/web-dev-server.config.mjs
index 83d0e588..a4dc90cb 100644
--- a/web-dev-server.config.mjs
+++ b/web-dev-server.config.mjs
@@ -13,6 +13,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   mimeTypes: {
     "**/custom-elements.json": "js",
     "src/components/**/*.css": "js",
+    "src/styles/common-styles.css": "js",
   },
   plugins: [...plugins, json()],
 })