@statistikzh/leu 0.5.1 → 0.6.0

package/.husky/commit-msg

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx --no -- commitlint --edit ${1}

package/.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged --verbose

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [0.6.0](https://github.com/statistikZH/leu/compare/v0.5.1...v0.6.0) (2024-07-01)
+
+
+### Features
+
+* **icon:** create an icon element ([0a8351c](https://github.com/statistikZH/leu/commit/0a8351c123c987572c2e187f492bf3a35ac53f27))
+* **icon:** render a placeholder if the name of the icon is unknown or not set ([a7dae7c](https://github.com/statistikZH/leu/commit/a7dae7c318fd791ca1a0095487fe6ced64b51023))
+* **menu-item:** implement getValue method ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **menu-item:** use hover and highlighted styling for focus too ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **menu:** avoid captured key events from navigating the whole page ([#191](https://github.com/statistikZH/leu/issues/191)) ([c40fc4e](https://github.com/statistikZH/leu/commit/c40fc4e4efbeafe3f30469adec1033484112e0d6))
+* **menu:** implement roving tab index ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **menu:** move all focus handling to the menu component ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* register dependency elements not before the dependent element ([4dfddcd](https://github.com/statistikZH/leu/commit/4dfddcd80e47bee5e047b3eee203d72e0e9d8fba))
+* **select:** always close the popup when focus leaves the element ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **select:** set max height of the menu ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **select:** use arrow buttons to navigate to listbox from the text input field ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+
+
+### Bug Fixes
+
+* buttons should inherit font-family ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **button:** set aria-expanded on the actual interactive element ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **dropdown:** replace hardcoded icon with a slot ([#189](https://github.com/statistikZH/leu/issues/189)) ([8954616](https://github.com/statistikZH/leu/commit/895461661a6b31a08868c166f3ed9474baed9a79))
+* **icon:** mark icon as presentational so it won't be announced by screen readers ([#186](https://github.com/statistikZH/leu/issues/186)) ([5d3d427](https://github.com/statistikZH/leu/commit/5d3d427c8c856a0b01f9dfc9568065e64f2653fa))
+* **icon:** remove faulty paths ([0a8351c](https://github.com/statistikZH/leu/commit/0a8351c123c987572c2e187f492bf3a35ac53f27))
+* **input:** avoid overlap by hiding the label ([#182](https://github.com/statistikZH/leu/issues/182)) ([d4edc51](https://github.com/statistikZH/leu/commit/d4edc51a812f27a35e8ed2cb86df872dd91d2874))
+* **menu-item:** allow disabled menu items to still be focusable ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **menu-item:** apply tab-index to the actual interactive element ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **menu-item:** only add aria attribute to the button element ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **menu-item:** remove deprecated properties before and after ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **menu-item:** use colors that are WCAG AA compliant ([5c59899](https://github.com/statistikZH/leu/commit/5c598990a40cd138bf47b1e0bf2c9026da1f4d87))
+* **menu:** only add role when no role was defined before ([78c3e68](https://github.com/statistikZH/leu/commit/78c3e6898a5ec4e88a13e698aca6f6caef653645))
+* **popup:** define a z-index value for the popup content ([#184](https://github.com/statistikZH/leu/issues/184)) ([72ec681](https://github.com/statistikZH/leu/commit/72ec68109589759b5887f159a4df42ee265b4b65))
+* **popup:** reflect properties to attributes ([#200](https://github.com/statistikZH/leu/issues/200)) ([44aec79](https://github.com/statistikZH/leu/commit/44aec79a8e8456240771da214d45440cc31891d7))
+* **radio:** remove label property as it is not used anymore ([e105a6e](https://github.com/statistikZH/leu/commit/e105a6eec33392d5bddf0d32e9881375576597d6))
+* **select:** add background to apply button ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **select:** move leu-menu element into the shadow dom so the role is fully controlled ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+* **select:** only call focus if the element is available ([5c59899](https://github.com/statistikZH/leu/commit/5c598990a40cd138bf47b1e0bf2c9026da1f4d87))
+* **select:** set correct aria attributes ([9846e87](https://github.com/statistikZH/leu/commit/9846e8709a81afce6074860fb597e42f394582d9))
+
 ## [0.5.1](https://github.com/statistikZH/leu/compare/v0.5.0...v0.5.1) (2024-05-23)
 
 

package/dist/Accordion.d.ts

@@ -1,22 +1,23 @@
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {Boolean} open - The expanded state of the accordion.
- * @prop {String} label - The label (title) of the accordion.
- * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
- * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
- * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {boolean} open - The expanded state of the accordion.
+ * @prop {string} label - The label (title) of the accordion.
+ * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
-export class LeuAccordion extends LitElement {
+export class LeuAccordion extends LeuElement {
     headingLevel: number;
     open: boolean;
     label: string;
+    labelPrefix: string;
     /**
      * Determines the heading tag of the accordion toggle.
      * The headingLevel shouldn't be used directly to render the heading tag
      * in order to avoid XSS issues.
-     * @returns {String} The heading tag of the accordion toggle.
+     * @returns {string} The heading tag of the accordion toggle.
      * @internal
      */
     _getHeadingTag(): string;
@@ -27,5 +28,5 @@ export class LeuAccordion extends LitElement {
     _handleToggleClick(): void;
     render(): import("lit-html").TemplateResult;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["Accordion.js"],"names":[],"mappings":"AA+JA;;;;;;;;;GASG;AACH;IAGI,qBAAqB;IACrB,cAAiB;IACjB,cAAe;IAGjB;;;;;;OAMG;IACH,yBAMC;IAED;;;OAGG;IACH,2BAEC;IACD,4CA2BC;CAEF;2BAnOwC,KAAK"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["Accordion.js"],"names":[],"mappings":"AA+JA;;;;;;;;;GASG;AACH;IAGI,qBAAqB;IACrB,cAAiB;IACjB,cAAe;IACf,oBAAqB;IAGvB;;;;;;OAMG;IACH,kBAHa,MAAM,CASlB;IAED;;;OAGG;IACH,2BAEC;IACD,4CA2BC;CAEF;gCArOqD,0BAA0B"}

package/dist/Accordion.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, nothing } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, nothing } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 var css_248z = css`:host,
@@ -160,26 +160,27 @@ slot[name="content"] {
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {Boolean} open - The expanded state of the accordion.
- * @prop {String} label - The label (title) of the accordion.
- * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
- * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
- * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {boolean} open - The expanded state of the accordion.
+ * @prop {string} label - The label (title) of the accordion.
+ * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
-class LeuAccordion extends LitElement {
+class LeuAccordion extends LeuElement {
   constructor() {
     super();
     this.headingLevel = 2;
     this.open = false;
     this.label = "";
+    this.labelPrefix = "";
   }
 
   /**
    * Determines the heading tag of the accordion toggle.
    * The headingLevel shouldn't be used directly to render the heading tag
    * in order to avoid XSS issues.
-   * @returns {String} The heading tag of the accordion toggle.
+   * @returns {string} The heading tag of the accordion toggle.
    * @internal
    */
   _getHeadingTag() {
@@ -230,7 +231,7 @@ class LeuAccordion extends LitElement {
 _defineProperty(LeuAccordion, "styles", css_248z);
 /** @internal */
 _defineProperty(LeuAccordion, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuAccordion, "properties", {

package/dist/Breadcrumb.d.ts

@@ -28,18 +28,18 @@
  *
  *
  * @prop {Array} items - Object array with { label, href }
- * @prop {Boolean} inverted - invert color on dark background
+ * @prop {boolean} inverted - invert color on dark background
  *
  * @tagname leu-breadcrumb
  */
-export class LeuBreadcrumb extends LitElement {
+export class LeuBreadcrumb extends LeuElement {
     _lastContainerWidth: any;
     _showBackOnly: boolean;
     _isRecalculating: boolean;
     _hiddenItems: number;
     _isDropdownOpen: boolean;
     items: any[];
-    /** @type {Boolean} - will be used on dark Background */
+    /** @type {boolean} - will be used on dark Background */
     inverted: boolean;
     /** @internal */
     _containerRef: import("lit-html/directives/ref.js").Ref<Element>;
@@ -64,6 +64,6 @@ export class LeuBreadcrumb extends LitElement {
     renderDropdown(): import("lit-html").TemplateResult<1> | typeof nothing;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 import { nothing } from 'lit';
 //# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AA+HA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,kBAAqB;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAoCC;IACD,gEAiCC;CACF;2BA7W8C,KAAK;wBAAL,KAAK"}
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AAuHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAqCC;IACD,gEAmCC;CACF;gCAzWqD,0BAA0B;wBAC7C,KAAK"}

package/dist/Breadcrumb.js

@@ -1,21 +1,15 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, nothing, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { I as Icon } from './icon-03e86700.js';
-import './leu-menu.js';
-import './leu-menu-item.js';
-import './leu-popup.js';
-import './leu-visually-hidden.js';
 import { d as debounce } from './utils-65469421.js';
-import './defineElement-40372b4b.js';
-import './Menu.js';
-import './MenuItem.js';
-import 'lit/static-html.js';
+import { LeuIcon } from './Icon.js';
+import { LeuMenu } from './Menu.js';
+import { LeuMenuItem } from './MenuItem.js';
+import { LeuPopup } from './Popup.js';
+import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import 'lit/directives/if-defined.js';
-import './Popup.js';
 import '@floating-ui/dom';
-import './VisuallyHidden.js';
 
 var css_248z = css`:host,
 :host * {
@@ -26,8 +20,6 @@ var css_248z = css`:host,
   --breadcrumb-font-regular: var(--leu-font-family-regular);
   --breadcrumb-font-black: var(--leu-font-family-black);
 
-  font-family: var(--leu-font-family-regular);
-
   font-family: var(--breadcrumb-font-regular);
   line-height: 1.5;
   color: var(--leu-color-black-100);
@@ -155,11 +147,11 @@ var css_248z = css`:host,
  *
  *
  * @prop {Array} items - Object array with { label, href }
- * @prop {Boolean} inverted - invert color on dark background
+ * @prop {boolean} inverted - invert color on dark background
  *
  * @tagname leu-breadcrumb
  */
-class LeuBreadcrumb extends LitElement {
+class LeuBreadcrumb extends LeuElement {
   constructor() {
     super();
     /** @type {Array} */
@@ -207,7 +199,7 @@ class LeuBreadcrumb extends LitElement {
       window.removeEventListener("click", this._closeDropdown);
     });
     this.items = [];
-    /** @type {Boolean} - will be used on dark Background */
+    /** @type {boolean} - will be used on dark Background */
     this.inverted = false;
 
     /** @internal */
@@ -297,7 +289,9 @@ class LeuBreadcrumb extends LitElement {
     if (this._dropdownItems.length === 0 && !this._isRecalculating) return nothing;
     return html`
       <li class="breadcrumbs__item" data-dropdown-toggle>
-        <span class="breadcrumbs__icon">${Icon("angleRight")}</span>
+        <span class="breadcrumbs__icon"
+          ><leu-icon name="angleRight"></leu-icon
+        ></span>
         <leu-popup
           ?active=${this._isDropdownOpen}
           placement="bottom-start"
@@ -318,10 +312,9 @@ class LeuBreadcrumb extends LitElement {
             ${html`
               <leu-menu>
                 ${this._dropdownItems.map(item => html`
-                      <leu-menu-item
-                        label=${item.label}
-                        href=${item.href}
-                      ></leu-menu-item>
+                      <leu-menu-item href=${item.href}
+                        >${item.label}</leu-menu-item
+                      >
                     `)}
               </leu-menu>
             `}
@@ -343,15 +336,17 @@ class LeuBreadcrumb extends LitElement {
         <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
         <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
           ${showBackOnly ? html` <li class="breadcrumbs__item breadcrumbs__item--back">
-                <span class="breadcrumbs__icon">${Icon("arrowLeft")}</span>
+                <span class="breadcrumbs__icon"
+                  ><leu-icon name="arrowLeft"></leu-icon
+                ></span>
                 <a class="breadcrumbs__link" href=${parentItem.href}
                   >${parentItem.label}</a
                 >
               </li>` : this._listItems.map((item, index, list) => html`
                     <li class="breadcrumbs__item">
                       ${index > 0 ? html`<span class="breadcrumbs__icon"
-                            >${Icon("angleRight")}</span
-                          >` // First list item doesn't have an arrow
+                            ><leu-icon name="angleRight"></leu-icon
+                          ></span>` // First list item doesn't have an arrow
     : nothing}
                       ${index === list.length - 1 ? item.label // Last list item doesn't contain a link
     : html`<a class="breadcrumbs__link" href=${item.href}
@@ -365,6 +360,13 @@ class LeuBreadcrumb extends LitElement {
     `;
   }
 }
+_defineProperty(LeuBreadcrumb, "dependencies", {
+  "leu-icon": LeuIcon,
+  "leu-menu": LeuMenu,
+  "leu-menu-item": LeuMenuItem,
+  "leu-popup": LeuPopup,
+  "leu-visually-hidden": LeuVisuallyHidden
+});
 _defineProperty(LeuBreadcrumb, "styles", css_248z);
 _defineProperty(LeuBreadcrumb, "properties", {
   items: {

package/dist/{Button-5326c982.d.ts → Button-9692e403.d.ts}

@@ -37,19 +37,20 @@ declare class HasSlotController implements ReactiveController {
 }
 /**
  * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
  */
-declare class LeuButton extends LitElement {
+declare class LeuButton extends LeuElement {
     label: any;
     /** @type {string} */
-    icon: string;
-    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
-    iconPosition: ("before" | "after");
-    /** @type {string} */
     size: string;
     /** @type {string} */
     variant: string;
     /** @type {"button" | "submit" | "reset"} */
     type: "button" | "submit" | "reset";
+    /** @type {string} */
+    componentRole: string;
     /** @type {boolean} */
     disabled: boolean;
     /** @type {boolean} - Only taken into account if no Label and an Icon is set */
@@ -65,20 +66,18 @@ declare class LeuButton extends LitElement {
      * @type {("true" | "false" | undefined)}
      */
     expanded: ("true" | "false" | undefined);
-    getIconSize(): 16 | 24;
-    renderIconBefore(): import("lit-html").TemplateResult<1> | typeof nothing;
-    renderIconAfter(): import("lit-html").TemplateResult<1> | typeof nothing;
     renderExpandingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
     getAriaAttributes(): {
-        role: any;
+        role: string;
         label: any;
     };
+    hasTextContent(): boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare const BUTTON_SIZES: string[];
 declare const BUTTON_TYPES: string[];
 declare const BUTTON_EXPANDED_OPTIONS: string[];
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 import { nothing } from 'lit';
 export { BUTTON_VARIANTS as B, HasSlotController as H, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c };
-//# sourceMappingURL=Button-5326c982.d.ts.map
+//# sourceMappingURL=Button-9692e403.d.ts.map

package/dist/Button-9692e403.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-9692e403.d.ts","sourceRoot":"","sources":["Button-9692e403.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AAyW7C,wCAA0D;AAhX1D;;;GAGG;AAEH;;;;GAIG;AACH,2CAFgB,kBAAkB;IAGhC,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAmTD;;;;;GAKG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,qBAAqB;IACrB,eADW,MAAM,CACa;IAE9B,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,6EAOC;IACD;;;MAaC;IACD,0BAEC;IACD,+CAiCC;CACF;AA7GD,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;gCA5XI,0BAA0B;wBAC7C,KAAK"}

package/dist/{Button-5326c982.js → Button-9692e403.js}

@@ -1,8 +1,8 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html, nothing } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { I as Icon } from './icon-03e86700.js';
+import { LeuIcon } from './Icon.js';
 
 /**
  * Thanks Shoelace!
@@ -76,6 +76,18 @@ class HasSlotController {
   }
 }
 
+/**
+ * All roles that are associated with a aria-checked attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ */
+const ARIA_CHECKED_ROLES = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
+
+/**
+ * All roles that are associated with a aria-selected attribute
+ * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ */
+const ARIA_SELECTED_ROLES = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
+
 var css_248z = css`:host {
   display: inline-block;
 }
@@ -98,17 +110,13 @@ button {
        column-gap: 8px;
 }
 
-.label {
+.content {
   flex: 1 1 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.icon .label {
-  display: none;
-}
-
 button.round {
   border-radius: 50%;
 }
@@ -140,7 +148,7 @@ button.regular {
   line-height: 24px;
 }
 
-button.regular.icon {
+button.regular.icon-only {
   padding: 12px;
 }
 
@@ -150,9 +158,11 @@ button.small {
   padding: 6px 24px;
   font-size: 14px;
   line-height: 20px;
+
+  --leu-icon-size: 1rem;
 }
 
-button.small.icon {
+button.small.icon-only {
   padding: 8px;
 }
 
@@ -211,6 +221,8 @@ button.secondary:disabled {
 /* ghost */
 
 button.ghost {
+  --leu-icon-size: 1rem;
+
   background: transparent;
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
@@ -293,11 +305,13 @@ button.ghost.inverted:disabled {
 
 /* icon-wrapper */
 
-.icon-wrapper svg {
+.icon-wrapper leu-icon {
   display: block;
 }
 
-.ghost .icon-wrapper--before, .ghost .icon-wrapper--after {
+.ghost.icon-before .icon-wrapper--before,
+.ghost.icon-after .icon-wrapper--after {
+  display: block;
   padding: 0.5rem;
   border-radius: 50%;
   background: var(--leu-color-black-transp-10);
@@ -367,41 +381,31 @@ Object.freeze(BUTTON_TYPES);
 const BUTTON_EXPANDED_OPTIONS = ["true", "false"];
 Object.freeze(BUTTON_EXPANDED_OPTIONS);
 
-/**
- * All roles that are associated with a aria-checked attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
- */
-const ARIA_ROLES_CHECKED = ["checkbox", "menuitemcheckbox", "menuitemradio", "option", "radio", "switch"];
-
-/**
- * All roles that are associated with a aria-selected attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
- */
-const ARIA_ROLES_SELECTED = ["gridcell", "option", "row", "tab", "columnheader", "rowheader", "treeitem"];
-
 /**
  * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
  */
-class LeuButton extends LitElement {
+class LeuButton extends LeuElement {
   constructor() {
     super();
     /** @type {string} */
     /**
      * @internal
      */
-    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["[default]"]));
+    _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after", "[default]"]));
     this.label = null;
     /** @type {string} */
-    this.icon = null;
-    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
-    this.iconPosition = "before";
-    /** @type {string} */
     this.size = "regular";
     /** @type {string} */
     this.variant = "primary";
     /** @type {"button" | "submit" | "reset"} */
     this.type = "button";
 
+    /** @type {string} */
+    this.componentRole = undefined;
+
     /** @type {boolean} */
     this.disabled = false;
     /** @type {boolean} - Only taken into account if no Label and an Icon is set */
@@ -420,29 +424,10 @@ class LeuButton extends LitElement {
      */
     this.expanded = undefined;
   }
-  getIconSize() {
-    return this.size === "small" || this.variant === "ghost" ? 16 : 24;
-  }
-  renderIconBefore() {
-    if (this.icon && this.iconPosition === "before") {
-      return html`<div class="icon-wrapper icon-wrapper--before">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`;
-    }
-    return nothing;
-  }
-  renderIconAfter() {
-    if (this.icon && this.iconPosition === "after") {
-      return html`<div class="icon-wrapper icon-wrapper--after">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`;
-    }
-    return nothing;
-  }
   renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-wrapper icon-wrapper--expanded">
-        ${Icon("angleDropDown", 24)}
+        <leu-icon name="angleDropDown" size="24"></leu-icon>
       </div>`;
     }
     return nothing;
@@ -453,20 +438,28 @@ class LeuButton extends LitElement {
       label: this.label
     };
     if (this.componentRole) {
-      if (ARIA_ROLES_CHECKED.includes(this.componentRole)) {
+      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
         attributes.checked = this.active ? "true" : "false";
-      } else if (ARIA_ROLES_SELECTED.includes(this.componentRole)) {
+      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
         attributes.selected = this.active ? "true" : "false";
       }
     }
     return attributes;
   }
+  hasTextContent() {
+    return Array.from(this.childNodes).some(node => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
+  }
   render() {
-    const hasContent = this.hasSlotController.test("[default]");
+    const hasTextContent = this.hasTextContent();
+    const hasIconDefault = Boolean(this.querySelector("leu-icon"));
+    const hasIconBefore = this.hasSlotController.test("before");
+    const hasIconAfter = this.hasSlotController.test("after");
     const aria = this.getAriaAttributes();
     const cssClasses = {
-      icon: !hasContent && this.icon,
-      round: !hasContent && this.icon && this.round,
+      "icon-only": hasIconDefault && !hasTextContent,
+      "icon-before": hasIconBefore,
+      "icon-after": hasIconAfter,
+      round: this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -477,24 +470,29 @@ class LeuButton extends LitElement {
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}
+        aria-expanded=${ifDefined(this.expanded)}
         role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
         ?disabled=${this.disabled}
         type=${this.type}
       >
-        ${this.renderIconBefore()}
-        <span class="label"><slot></slot></span>
-        ${this.renderIconAfter()} ${this.renderExpandingIcon()}
+        <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
+        <span class="content"><slot></slot></span>
+        <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
+        ${this.renderExpandingIcon()}
       </button>
     `;
   }
 }
+_defineProperty(LeuButton, "dependencies", {
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuButton, "styles", css_248z);
 /**
  * @internal
  */
 _defineProperty(LeuButton, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuButton, "properties", {
@@ -502,14 +500,6 @@ _defineProperty(LeuButton, "properties", {
     type: String,
     reflect: true
   },
-  icon: {
-    type: String,
-    reflect: true
-  },
-  iconPosition: {
-    type: String,
-    reflect: true
-  },
   size: {
     type: String,
     reflect: true

package/dist/Button.d.ts

@@ -1,2 +1,2 @@
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-5326c982.js";
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from "./Button-9692e403.js";
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.js

@@ -1,6 +1,6 @@
-import './_rollupPluginBabelHelpers-20f659f4.js';
+import './LeuElement-6de6f209.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
-import './icon-03e86700.js';
-export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-5326c982.js';
+import './Icon.js';
+export { c as BUTTON_EXPANDED_OPTIONS, a as BUTTON_SIZES, b as BUTTON_TYPES, B as BUTTON_VARIANTS, L as LeuButton } from './Button-9692e403.js';