@statistikzh/leu 0.21.1 → 0.22.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.21.1"
+  ".": "0.22.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.22.0](https://github.com/statistikZH/leu/compare/leu-v0.21.1...leu-v0.22.0) (2025-11-18)
+
+
+### Features
+
+* **dropdown:** add inverted property so that the dropdown can be used on a dark barkground ([a0ee49c](https://github.com/statistikZH/leu/commit/a0ee49c06518563d2ff69fa1e3dfe8781b97cc28))
+
 ## [0.21.1](https://github.com/statistikZH/leu/compare/leu-v0.21.0...leu-v0.21.1) (2025-11-17)
 
 

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing } from 'lit';
 import { unsafeStatic, html } from 'lit/static-html.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);

package/dist/Button.js

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { LeuIcon } from './Icon.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 
 /**

package/dist/ButtonGroup.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuButton } from './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/ChartWrapper.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/CheckboxGroup.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 const SIZES = {
     regular: "regular",

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';
 

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 const SIZES = {
     small: "small",

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Dropdown.d.ts

@@ -29,6 +29,10 @@ declare class LeuDropdown extends LeuElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
     hasSlotController: HasSlotController;
     constructor();

package/dist/Dropdown.js

@@ -1,6 +1,6 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';
@@ -63,6 +63,7 @@ class LeuDropdown extends LeuElement {
         };
         this.label = "";
         this.expanded = false;
+        this.inverted = false;
         /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
         this._toggleRef = createRef();
     }
@@ -128,6 +129,7 @@ class LeuDropdown extends LeuElement {
           variant="ghost"
           expanded=${this.expanded ? "true" : "false"}
           ?active=${this.expanded}
+          ?inverted=${this.inverted}
           @click=${this._handleToggleClick}
           @keydown=${this._keyDownToggleHandler}
         >
@@ -151,6 +153,7 @@ LeuDropdown.styles = [LeuElement.styles, css_248z];
 LeuDropdown.properties = {
     label: { type: String, reflect: true },
     expanded: { type: Boolean, reflect: true },
+    inverted: { type: Boolean, reflect: true },
 };
 
 export { LeuDropdown };

package/dist/FileInput.js

@@ -3,7 +3,7 @@ import { css, html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import './Accordion.js';
 import { LeuButton } from './Button.js';
 import './ButtonGroup.js';

package/dist/Icon.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   display: contents;

package/dist/Input.js

@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/{LeuElement-BLUQU9Eu.js → LeuElement-BooZrClI.js}

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.21.1";
+LeuElement.version = "0.22.0";
 LeuElement.dependencies = {};
 LeuElement.styles = css_248z;
 

package/dist/Menu.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/MenuItem.js

@@ -1,6 +1,6 @@
 import { css, html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/Message.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuIcon } from './Icon.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 

package/dist/Pagination.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
 import { property, state } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuButton } from './Button.js';
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import { LeuIcon } from './Icon.js';

package/dist/Placeholder.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   --placeholder-font-regular: var(--leu-font-family-regular);

package/dist/Popup.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { autoUpdate, size, flip, shift, computePosition } from '@floating-ui/dom';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   --popup-font-regular: var(--leu-font-family-regular);

package/dist/ProgressBar.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`/* :host {
   --progress-bar-font-regular: var(--leu-font-family-regular);

package/dist/Radio.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   --radio-color: var(--leu-color-black-40);

package/dist/RadioGroup.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuRadio } from './Radio.js';
 
 var css_248z = css`:host {

package/dist/Range.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   --range-color: var(--leu-color-black-40);

package/dist/ScrollTop.js

@@ -1,6 +1,6 @@
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Select.js

@@ -2,7 +2,7 @@ import { css, nothing, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/Spinner.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`@keyframes leu-spinner-rotate {
   from {

package/dist/Table.js

@@ -1,7 +1,7 @@
 import { nothing, noChange, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 import { directive, Directive, PartType } from 'lit/directive.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';

package/dist/Tag.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   /* --tag-font-regular: var(--leu-font-family-regular);

package/dist/VisuallyHidden.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { L as LeuElement } from './LeuElement-BooZrClI.js';
 
 var css_248z = css`:host {
   clip: rect(0 0 0 0);

package/dist/components/dropdown/Dropdown.d.ts

@@ -24,6 +24,10 @@ export declare class LeuDropdown extends LeuElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        inverted: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
     hasSlotController: HasSlotController;
     constructor();

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI5C;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,UAAU;;;;;;;;;MAGhB;IAED,iBAAiB,oBAAwC;;IAYzD,iBAAiB;IAWjB,oBAAoB;IAWpB,qBAAqB,uBAIpB;IAED,aAAa,CAAC,KAAK,KAAA;IAMb,qBAAqB,CAAC,KAAK,KAAA;IAiBjC,qBAAqB,mBAKpB;IAED;;;;OAIG;IACH,mBAAmB,mBAMlB;IAED,kBAAkB;IAIlB;;OAEG;IACH,QAAQ;IAIR,MAAM;CA8BP"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAI5C;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,UAAU;;;;;;;;;;;;;MAIhB;IAED,iBAAiB,oBAAwC;;IAazD,iBAAiB;IAWjB,oBAAoB;IAWpB,qBAAqB,uBAIpB;IAED,aAAa,CAAC,KAAK,KAAA;IAMb,qBAAqB,CAAC,KAAK,KAAA;IAiBjC,qBAAqB,mBAKpB;IAED;;;;OAIG;IACH,mBAAmB,mBAMlB;IAED,kBAAkB;IAIlB;;OAEG;IACH,QAAQ;IAIR,MAAM;CA+BP"}

package/dist/components/dropdown/stories/dropdown.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/stories/dropdown.stories.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,wBAAwB,CAAA;AAI/B;;GAEG;;;;;;;;;;;;;;;;;AACH,wBAeC;AAoBD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAMxC,eAAO,MAAM,WAAW,KAAoB,CAAA"}
+{"version":3,"file":"dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/stories/dropdown.stories.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,wBAAwB,CAAA;AAI/B;;GAEG;;;;;;;;;;;;;;;;;AACH,wBAeC;AAwBD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAMxC,eAAO,MAAM,WAAW,KAAoB,CAAA"}

package/dist/index.js

@@ -18,7 +18,7 @@ export { LeuRadio } from './Radio.js';
 export { LeuRadioGroup } from './RadioGroup.js';
 export { LeuSelect } from './Select.js';
 export { LeuTable } from './Table.js';
-export { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+export { L as LeuElement } from './LeuElement-BooZrClI.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/static-html.js';

package/dist/leu-accordion.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/static-html.js';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuAccordion.define("leu-accordion");
 

package/dist/leu-button-group.js

@@ -1,6 +1,6 @@
 import { LeuButtonGroup } from './ButtonGroup.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/leu-button.js

@@ -5,7 +5,7 @@ import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/decorators.js';
 import './Icon.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './hasSlotController-Bm2tipvG.js';
 
 LeuButton.define("leu-button");

package/dist/leu-chart-wrapper.js

@@ -2,7 +2,7 @@ import { LeuChartWrapper } from './ChartWrapper.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Spinner.js';
 

package/dist/leu-checkbox-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Checkbox.js';
 import './Icon.js';
 

package/dist/leu-checkbox.js

@@ -2,7 +2,7 @@ import { LeuCheckbox } from './Checkbox.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Icon.js';
 
 LeuCheckbox.define("leu-checkbox");

package/dist/leu-chip-group.js

@@ -1,6 +1,6 @@
 import { LeuChipGroup } from './ChipGroup.js';
 import 'lit/static-html.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import 'lit';
 
 LeuChipGroup.define("leu-chip-group");

package/dist/leu-chip-link.js

@@ -1,7 +1,7 @@
 import { LeuChipLink } from './ChipLink.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuChipLink.define("leu-chip-link");
 

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-chip-selectable.js

@@ -1,7 +1,7 @@
 import { LeuChipSelectable } from './ChipSelectable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuChipSelectable.define("leu-chip-selectable");
 

package/dist/leu-dialog.js

@@ -2,7 +2,7 @@ import { LeuDialog } from './Dialog.js';
 import 'lit';
 import 'lit/directives/ref.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-dropdown.js

@@ -1,7 +1,7 @@
 import { LeuDropdown } from './Dropdown.js';
 import 'lit';
 import 'lit/directives/ref.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-file-input.js

@@ -4,7 +4,7 @@ import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Accordion.js';
 import 'lit/static-html.js';
 import './Button.js';

package/dist/leu-icon.js

@@ -2,7 +2,7 @@ import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuIcon.define("leu-icon");
 

package/dist/leu-input.js

@@ -4,7 +4,7 @@ import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import 'lit/directives/live.js';
 import 'lit/directives/ref.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-menu-item.js

@@ -1,7 +1,7 @@
 import { LeuMenuItem } from './MenuItem.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

package/dist/leu-menu.js

@@ -1,6 +1,6 @@
 import { LeuMenu } from './Menu.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-message.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
 import 'lit/directives/class-map.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Icon.js';
 import './hasSlotController-Bm2tipvG.js';
 

package/dist/leu-pagination.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/live.js';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-placeholder.js

@@ -1,6 +1,6 @@
 import { LeuPlaceholder } from './Placeholder.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuPlaceholder.define("leu-placeholder");
 

package/dist/leu-popup.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
 import '@floating-ui/dom';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuPopup.define("leu-popup");
 

package/dist/leu-progress-bar.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuProgressBar.define("leu-progress-bar");
 

package/dist/leu-radio-group.js

@@ -3,7 +3,7 @@ import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Radio.js';
 
 LeuRadioGroup.define("leu-radio-group");

package/dist/leu-radio.js

@@ -2,7 +2,7 @@ import { LeuRadio } from './Radio.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuRadio.define("leu-radio");
 

package/dist/leu-range.js

@@ -1,6 +1,6 @@
 import { LeuRange } from './Range.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuRange.define("leu-range");
 

package/dist/leu-scroll-top.js

@@ -1,7 +1,7 @@
 import { LeuScrollTop } from './ScrollTop.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-select.js

@@ -3,7 +3,7 @@ import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import './hasSlotController-Bm2tipvG.js';
 import './Button.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-spinner.js

@@ -1,6 +1,6 @@
 import { LeuSpinner } from './Spinner.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuSpinner.define("leu-spinner");
 

package/dist/leu-table.js

@@ -2,7 +2,7 @@ import { LeuTable } from './Table.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 import 'lit/directive.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/leu-tag.js

@@ -2,7 +2,7 @@ import { LeuTag } from './Tag.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/decorators.js';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuTag.define("leu-tag");
 

package/dist/leu-visually-hidden.js

@@ -1,6 +1,6 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
 import 'lit';
-import './LeuElement-BLUQU9Eu.js';
+import './LeuElement-BooZrClI.js';
 
 LeuVisuallyHidden.define("leu-visually-hidden");
 

package/dist/vscode.html-custom-data.json

@@ -34,6 +34,17 @@
         }
       ]
     },
+    {
+      "name": "leu-button-group",
+      "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
+        }
+      ]
+    },
     {
       "name": "leu-button",
       "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -109,17 +120,6 @@
         }
       ]
     },
-    {
-      "name": "leu-button-group",
-      "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-      "attributes": [],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
-        }
-      ]
-    },
     {
       "name": "leu-chart-wrapper",
       "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -288,7 +288,8 @@
       "description": "\n---\n",
       "attributes": [
         { "name": "label", "values": [] },
-        { "name": "expanded", "values": [] }
+        { "name": "expanded", "values": [] },
+        { "name": "inverted", "values": [] }
       ],
       "references": [
         {

package/dist/vue/index.d.ts

@@ -1,8 +1,8 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuButton } from "../Button.js";
 import type { LeuButtonGroup } from "../ButtonGroup.js";
+import type { LeuButton } from "../Button.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
@@ -43,6 +43,13 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
+type LeuButtonGroupProps = {
+  /** The value of the currently selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /** When the value of the group changes by clicking a button */
+  oninput?: (e: CustomEvent<never>) => void;
+};
+
 type LeuButtonProps = {
   /** `aria-label` of the underlying button elements.
 Use it to provide a label when only an icon is visible. */
@@ -74,13 +81,6 @@ If it is set, the icon will either show an expanded or collapsed state. */
   fluid?: LeuButton["fluid"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currently selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<never>) => void;
-};
-
 type LeuChartWrapperProps = {
   /** Whether the chart is currently loading or not.
 When set to `true`, a spinner will be shown in the chart container. */
@@ -175,6 +175,8 @@ type LeuDropdownProps = {
   /**  */
   expanded?: LeuDropdown["expanded"];
   /**  */
+  inverted?: LeuDropdown["inverted"];
+  /**  */
   hasSlotController?: LeuDropdown["hasSlotController"];
   /**  */
   _documentClickHandler?: LeuDropdown["_documentClickHandler"];
@@ -500,18 +502,6 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - **before** - The icon to display before the label
-   * - **after** - The icon to display after the label
-   * - _default_ - The label of the button or the icon if no label is set
-   */
-  "leu-button": DefineComponent<LeuButtonProps>;
-
   /**
    * A radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -526,6 +516,18 @@ export type CustomElements = {
    */
   "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
+   */
+  "leu-button": DefineComponent<LeuButtonProps>;
+
   /**
    * A wrapper element for charts.
    * ---

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.21.1",
+  "version": "0.22.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -211,33 +238,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -576,6 +576,10 @@
             {
               "name": "expanded",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "inverted",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [],
@@ -590,6 +594,7 @@
               },
               { "name": "label", "type": "string" },
               { "name": "expanded", "type": "boolean" },
+              { "name": "inverted", "type": "boolean" },
               { "name": "_toggleRef", "type": "Ref<HTMLButtonElement>" }
             ],
             "events": []

package/package.json

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

package/src/components/dropdown/Dropdown.ts

@@ -27,6 +27,7 @@ export class LeuDropdown extends LeuElement {
   static properties = {
     label: { type: String, reflect: true },
     expanded: { type: Boolean, reflect: true },
+    inverted: { type: Boolean, reflect: true },
   }
 
   hasSlotController = new HasSlotController(this, ["icon"])
@@ -36,6 +37,7 @@ export class LeuDropdown extends LeuElement {
 
     this.label = ""
     this.expanded = false
+    this.inverted = false
 
     /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
     this._toggleRef = createRef()
@@ -141,6 +143,7 @@ export class LeuDropdown extends LeuElement {
           variant="ghost"
           expanded=${this.expanded ? "true" : "false"}
           ?active=${this.expanded}
+          ?inverted=${this.inverted}
           @click=${this._handleToggleClick}
           @keydown=${this._keyDownToggleHandler}
         >

package/src/components/dropdown/stories/dropdown.stories.ts

@@ -24,8 +24,12 @@ export default {
   },
 }
 
-function Template({ label, expanded, icon }) {
-  return html` <leu-dropdown label=${label} ?expanded=${expanded}>
+function Template({ label, expanded, icon, inverted }) {
+  return html` <leu-dropdown
+    label=${label}
+    ?expanded=${expanded}
+    ?inverted=${inverted}
+  >
     ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
     <leu-menu>
       <leu-menu-item

package/src/components/dropdown/test/dropdown.test.ts

@@ -3,9 +3,13 @@ import { fixture, expect, elementUpdated } from "@open-wc/testing"
 
 import "../leu-dropdown.js"
 
-async function defaultFixture(args = { expanded: false }) {
+async function defaultFixture(args = { expanded: false, inverted: false }) {
   return fixture(
-    html` <leu-dropdown label="Download" ?expanded=${args.expanded}>
+    html` <leu-dropdown
+      label="Download"
+      ?expanded=${args.expanded}
+      ?inverted=${args.inverted}
+    >
       <leu-menu>
         <leu-menu-item>Als CSV Tabelle</leu-menu-item>
         <leu-menu-item>Als XLS Tabelle</leu-menu-item>
@@ -44,4 +48,12 @@ describe("LeuDropdown", () => {
 
     expect(el.expanded).to.be.false
   })
+
+  it("reflects the inverted property to the internal button", async () => {
+    const el = await defaultFixture({ inverted: true })
+    await elementUpdated(el)
+
+    const toggleButton = el.shadowRoot.querySelector("leu-button")
+    expect(toggleButton.inverted).to.be.true
+  })
 })