@statistikzh/leu 0.11.0 → 0.12.0

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
 import { LeuRadio } from './Radio.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 
 LeuRadio.define("leu-radio");

package/dist/leu-range.js

@@ -1,5 +1,5 @@
 import { LeuRange } from './Range.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 
 LeuRange.define("leu-range");

package/dist/leu-scroll-top.js

@@ -1,11 +1,11 @@
 import { LeuScrollTop } from './ScrollTop.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-fd1950b4.js';
+import './hasSlotController-bfe693e4.js';
 import './utils-65469421.js';
 
 LeuScrollTop.define("leu-scroll-top");

package/dist/leu-select.js

@@ -1,10 +1,10 @@
 import { LeuSelect } from './Select.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-fd1950b4.js';
+import './hasSlotController-bfe693e4.js';
 import './Button.js';
 import './Icon.js';
 import './Menu.js';

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
 import { LeuSpinner } from './Spinner.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 
 LeuSpinner.define("leu-spinner");

package/dist/leu-table.js

@@ -1,5 +1,5 @@
 import { LeuTable } from './Table.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
@@ -9,7 +9,7 @@ import './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-fd1950b4.js';
+import './hasSlotController-bfe693e4.js';
 import './VisuallyHidden.js';
 
 LeuTable.define("leu-table");

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './LeuElement-78b4a998.js';
+import './LeuElement-d661ef10.js';
 import 'lit';
 
 LeuVisuallyHidden.define("leu-visually-hidden");

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/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,

package/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);

package/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 = {
@@ -72,7 +72,7 @@ export class LeuAccordion extends LeuElement {
         id="toggle"
         type="button"
         class="button"
-        aria-controls="content"
+        aria-controls="contentwrapper"
         aria-expanded="${this.open}"
         @click=${this._handleToggleClick}
       >
@@ -85,13 +85,17 @@ export class LeuAccordion extends LeuElement {
         <div class="plus"></div>
       </button></${unsafeStatic(hTag)}>
       <div
-        id="content"
-        class="content"
+        id="contentwrapper"
+        class="contentwrapper"
+        ?hidden=${!this.open}
         aria-labelledby="toggle"
         role="region"
-        ?hidden=${!this.open}
       >
-        <slot name="content"></slot>
+        <div
+          class="content"
+        >
+          <slot name="content"></slot>
+        </div>
       </div>
       <hr class="divider" />`
   }

package/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,17 +14,9 @@
 
   --transition: 0.1s ease;
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--accordion-font-regular);
 
   position: relative;
-  display: grid;
-  grid-template-rows: auto 0fr;
-
-  transition: grid-template-rows var(--transition);
-}
-
-:host([open]) {
-  grid-template-rows: auto 1fr;
 }
 
 .heading {
@@ -115,15 +102,18 @@
   flex-grow: 1;
 }
 
+.contentwrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--transition);
+}
+
 .content {
   overflow: hidden;
-  transition: visibility var(--transition), opacity var(--transition);
 }
 
-.content[hidden] {
-  display: block;
-  visibility: hidden;
-  opacity: 0;
+.contentwrapper[hidden] {
+  grid-template-rows: 0fr;
 }
 
 slot[name="content"] {
@@ -140,9 +130,6 @@ slot[name="content"] {
 }
 
 .divider {
-  position: absolute;
-  top: 100%;
-  left: 0;
 
   width: 100%;
   height: 1px;

package/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 },

package/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);

package/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

package/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()

package/src/components/button-group/button-group.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 .group {
   display: flex;
   gap: 0.5rem;

package/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 = {

package/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 },

package/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 = {

package/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 },

package/src/components/chip/chip.css

@@ -1,5 +1,3 @@
-:host,
-:host *,
 :host *::before,
 :host *::after {
   box-sizing: border-box;

package/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,

package/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);

package/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 },

package/src/components/dropdown/dropdown.css

@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   position: relative;
 }

package/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 },

package/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

package/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);

package/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,

package/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

package/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);

package/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);
 }

package/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

package/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,

package/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);

package/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 = {

package/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 },

package/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,

package/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);
 }

package/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 },

package/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 {

package/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);

package/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`

package/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 },
@@ -183,7 +183,11 @@ export class LeuTable extends LeuElement {
             <tr>
               ${this._columns.map(
                 (col) =>
-                  html`<th>
+                  html`<th
+                    style=${col.headerStyle
+                      ? styleMap(col.headerStyle())
+                      : nothing}
+                  >
                     ${col.sort
                       ? html`<button @click=${(_) => this.sortClick(col)}>
                           <span>${col.name}</span>

package/src/components/table/stories/table.stories.js

@@ -26,6 +26,11 @@ function Template({ itemsPerPage }) {
           {
             name: "Name",
             value: (row) => row.name,
+            headerStyle: () => {
+              return {
+                color: "#0076bd",
+              }
+            },
             style: (row) => {
               return {
                 minWidth: "400px",
@@ -38,7 +43,7 @@ function Template({ itemsPerPage }) {
           },
           {
             name: "Menge",
-            value: (row) => row.menge,
+            value: (row) => row.menge + "%",
             style: (row) => {
               return {
                 color:

package/src/components/table/table.css

@@ -71,6 +71,7 @@ button {
   align-items: flex-center;
   font-size: inherit;
   font-family: inherit;
+  color: inherit;
 }
 
 thead leu-icon {

package/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>`

package/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))
 

package/src/styles/common-styles.css

@@ -0,0 +1,5 @@
+:host,
+:host * {
+  box-sizing: border-box;
+  font-feature-settings: var(--leu-t-font-feature-settings);
+}

package/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 {

package/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()],
 })

package/dist/LeuElement-78b4a998.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-78b4a998.d.ts","sourceRoot":"","sources":["LeuElement-78b4a998.js"],"names":[],"mappings":"AA+BA;IACE,8EAcC;CACF;AA7CD,sEAaC;2BAf0B,KAAK"}