@statistikzh/leu 0.21.0 → 0.21.1

package/.release-please-manifest.json

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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.21.1](https://github.com/statistikZH/leu/compare/leu-v0.21.0...leu-v0.21.1) (2025-11-17)
+
+
+### Bug Fixes
+
+* use custom implementation of the styleMap directive to be compatible with strict CSPs ([3a9a4d4](https://github.com/statistikZH/leu/commit/3a9a4d4a0685791ba35f4799b89c95e0f53eb037))
+
 ## [0.21.0](https://github.com/statistikZH/leu/compare/leu-v0.20.0...leu-v0.21.0) (2025-11-13)
 
 

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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import './Accordion.js';
 import { LeuButton } from './Button.js';
 import './ButtonGroup.js';
@@ -34,7 +34,7 @@ import './Chip.js';
 import 'lit/directives/ref.js';
 import '@floating-ui/dom';
 import 'lit/directives/live.js';
-import 'lit/directives/style-map.js';
+import 'lit/directive.js';
 
 var css_248z = css`:host {
   --file-input-font-regular: var(--leu-font-family-regular);

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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';

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

@@ -35,7 +35,7 @@ class LeuElement extends LitElement {
         }
     }
 }
-LeuElement.version = "0.21.0";
+LeuElement.version = "0.21.1";
 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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 
 var css_248z = css`@keyframes leu-spinner-rotate {
   from {

package/dist/Table.js

@@ -1,8 +1,8 @@
-import { css, html, nothing } from 'lit';
+import { nothing, noChange, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
+import { directive, Directive, PartType } from 'lit/directive.js';
 import { LeuIcon } from './Icon.js';
 import { LeuPagination } from './Pagination.js';
 import './_tslib-CNEFicEt.js';
@@ -13,6 +13,100 @@ import 'lit/directives/if-defined.js';
 import './hasSlotController-Bm2tipvG.js';
 import './VisuallyHidden.js';
 
+/* eslint-disable prefer-template,no-param-reassign,no-restricted-syntax,guard-for-in */
+/**
+ * The original lit styleMap directive is not compatible with a strict style-src content security policy.
+ * There is an an open issue about this in the lit repository:
+ * https://github.com/lit/lit/issues/4719
+ *
+ * This file contains a custom implementation of the styleMap directive that bypasses
+ * the render method and directly updates the styles using the .style.setProperty and
+ * .style.removeProperty methods.
+ *
+ * In the original implementation, the render method returns a string that is set as the
+ * value of the style attribute. This approach is blocked by strict CSPs that disallow
+ * inline styles.
+ *
+ * As we don't support SSR in this library, we can safely skip the render method.
+ */
+const important = "important";
+// The leading space is important
+const importantFlag = " !" + important;
+// How many characters to remove from a value, as a negative number
+const flagTrim = 0 - importantFlag.length;
+class StyleMapDirective extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.ATTRIBUTE ||
+            partInfo.name !== "style" ||
+            partInfo.strings?.length > 2) {
+            throw new Error("The `styleMap` directive must be used in the `style` attribute " +
+                "and must be the only part in the attribute.");
+        }
+    }
+    render(_styleInfo) {
+        return nothing;
+    }
+    update(part, [styleInfo]) {
+        const { style } = part.element;
+        if (this._previousStyleProperties === undefined) {
+            this._previousStyleProperties = new Set(Object.keys(styleInfo));
+        }
+        // Remove old properties that no longer exist in styleInfo
+        for (const name of this._previousStyleProperties) {
+            // If the name isn't in styleInfo or it's null/undefined
+            if (styleInfo[name] == null) {
+                this._previousStyleProperties.delete(name);
+                if (name.includes("-")) {
+                    style.removeProperty(name);
+                }
+                else {
+                    style[name] = null;
+                }
+            }
+        }
+        // Add or update properties
+        for (const name in styleInfo) {
+            const value = styleInfo[name];
+            if (value != null) {
+                this._previousStyleProperties.add(name);
+                const isImportant = typeof value === "string" && value.endsWith(importantFlag);
+                if (name.includes("-") || isImportant) {
+                    style.setProperty(name, isImportant
+                        ? value.slice(0, flagTrim)
+                        : value, isImportant ? important : "");
+                }
+                else {
+                    style[name] = value;
+                }
+            }
+        }
+        return noChange;
+    }
+}
+/**
+ * !A custom implementation of lit's `styleMap` directive!
+ * A directive that applies CSS properties to an element.
+ *
+ * `styleMap` can only be used in the `style` attribute and must be the only
+ * expression in the attribute. It takes the property names in the
+ * {@link StyleInfo styleInfo} object and adds the properties to the inline
+ * style of the element.
+ *
+ * Property names with dashes (`-`) are assumed to be valid CSS
+ * property names and set on the element's style object using `setProperty()`.
+ * Names without dashes are assumed to be camelCased JavaScript property names
+ * and set on the element's style object using property assignment, allowing the
+ * style object to translate JavaScript-style names to CSS property names.
+ *
+ * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+ * '0'})` sets the `background-color`, `border-top` and `--size` properties.
+ *
+ * @param styleInfo
+ * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
+ */
+const styleMap = directive(StyleMapDirective);
+
 var css_248z = css`:host {
   position: relative;
   display: block;

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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 
 var css_248z = css`:host {
   clip: rect(0 0 0 0);

package/dist/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAI3D;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,YAAY;;;MAGlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYhB;;IAkCD,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,KAAA,EAAE,MAAM,KAAA,EAAE,MAAM,KAAA;IAQ7C,YAAY;IAMZ,YAAY,CAAC,MAAM,KAAA;IAMnB,WAAW,CAAC,KAAK,KAAA;IAIjB,iBAAiB;IAUjB,QAAQ,CAAC,GAAG,KAAA;IAIZ,SAAS,CAAC,GAAG,KAAA;IAUb,aAAa;IAMb,IAAI,QAAQ,QAEX;IAED,IAAI,WAAW,QAMd;IAED,IAAI,KAAK,QAOR;IAED,MAAM;CAyGP"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAI3D;;GAEG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,YAAY;;;MAGlB;IAED,MAAM,CAAC,MAAM,iCAA8B;IAE3C,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAYhB;;IAkCD,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,KAAA,EAAE,MAAM,KAAA,EAAE,MAAM,KAAA;IAQ7C,YAAY;IAMZ,YAAY,CAAC,MAAM,KAAA;IAMnB,WAAW,CAAC,KAAK,KAAA;IAIjB,iBAAiB;IAUjB,QAAQ,CAAC,GAAG,KAAA;IAIZ,SAAS,CAAC,GAAG,KAAA;IAUb,aAAa;IAMb,IAAI,QAAQ,QAEX;IAED,IAAI,WAAW,QAMd;IAED,IAAI,KAAK,QAOR;IAED,MAAM;CAyGP"}

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-BFljD2fO.js';
+export { L as LeuElement } from './LeuElement-BLUQU9Eu.js';
 import './_tslib-CNEFicEt.js';
 import 'lit';
 import 'lit/static-html.js';
@@ -33,4 +33,4 @@ import 'lit/directives/ref.js';
 import 'lit/directives/live.js';
 import './VisuallyHidden.js';
 import '@floating-ui/dom';
-import 'lit/directives/style-map.js';
+import 'lit/directive.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
 
 LeuAccordion.define("leu-accordion");
 

package/dist/leu-button-group.js

@@ -1,6 +1,6 @@
 import { LeuButtonGroup } from './ButtonGroup.js';
 import 'lit';
-import './LeuElement-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
 import './Accordion.js';
 import 'lit/static-html.js';
 import './Button.js';
@@ -34,7 +34,7 @@ import './Radio.js';
 import './RadioGroup.js';
 import './Select.js';
 import './Table.js';
-import 'lit/directives/style-map.js';
+import 'lit/directive.js';
 import './leu-icon.js';
 
 LeuFileInput.define("leu-file-input");

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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
 
 LeuRadio.define("leu-radio");
 

package/dist/leu-range.js

@@ -1,6 +1,6 @@
 import { LeuRange } from './Range.js';
 import 'lit';
-import './LeuElement-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
 
 LeuSpinner.define("leu-spinner");
 

package/dist/leu-table.js

@@ -1,9 +1,9 @@
 import { LeuTable } from './Table.js';
 import 'lit';
 import 'lit/directives/class-map.js';
-import 'lit/directives/style-map.js';
 import 'lit/directives/ref.js';
-import './LeuElement-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
+import 'lit/directive.js';
 import './Icon.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.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-BFljD2fO.js';
+import './LeuElement-BLUQU9Eu.js';
 
 LeuTag.define("leu-tag");
 

package/dist/leu-visually-hidden.js

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

package/dist/lib/styleMap.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The original lit styleMap directive is not compatible with a strict style-src content security policy.
+ * There is an an open issue about this in the lit repository:
+ * https://github.com/lit/lit/issues/4719
+ *
+ * This file contains a custom implementation of the styleMap directive that bypasses
+ * the render method and directly updates the styles using the .style.setProperty and
+ * .style.removeProperty methods.
+ *
+ * In the original implementation, the render method returns a string that is set as the
+ * value of the style attribute. This approach is blocked by strict CSPs that disallow
+ * inline styles.
+ *
+ * As we don't support SSR in this library, we can safely skip the render method.
+ */
+import { AttributePart } from "lit";
+import { Directive, DirectiveParameters, PartInfo } from "lit/directive.js";
+/**
+ * A key-value set of CSS properties and values.
+ *
+ * The key should be either a valid CSS property name string, like
+ * `'background-color'`, or a valid JavaScript camel case property name
+ * for CSSStyleDeclaration like `backgroundColor`.
+ */
+export interface StyleInfo {
+    [name: string]: string | number | undefined | null;
+}
+declare class StyleMapDirective extends Directive {
+    private _previousStyleProperties?;
+    constructor(partInfo: PartInfo);
+    render(_styleInfo: Readonly<StyleInfo>): symbol;
+    update(part: AttributePart, [styleInfo]: DirectiveParameters<this>): symbol;
+}
+/**
+ * !A custom implementation of lit's `styleMap` directive!
+ * A directive that applies CSS properties to an element.
+ *
+ * `styleMap` can only be used in the `style` attribute and must be the only
+ * expression in the attribute. It takes the property names in the
+ * {@link StyleInfo styleInfo} object and adds the properties to the inline
+ * style of the element.
+ *
+ * Property names with dashes (`-`) are assumed to be valid CSS
+ * property names and set on the element's style object using `setProperty()`.
+ * Names without dashes are assumed to be camelCased JavaScript property names
+ * and set on the element's style object using property assignment, allowing the
+ * style object to translate JavaScript-style names to CSS property names.
+ *
+ * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+ * '0'})` sets the `background-color`, `border-top` and `--size` properties.
+ *
+ * @param styleInfo
+ * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
+ */
+export declare const styleMap: (_styleInfo: Readonly<StyleInfo>) => import("lit-html/directive.js").DirectiveResult<typeof StyleMapDirective>;
+/**
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
+ */
+export type { StyleMapDirective };
+//# sourceMappingURL=styleMap.d.ts.map

package/dist/lib/styleMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleMap.d.ts","sourceRoot":"","sources":["../../src/lib/styleMap.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,aAAa,EAAqB,MAAM,KAAK,CAAA;AACtD,OAAO,EAEL,SAAS,EACT,mBAAmB,EACnB,QAAQ,EAET,MAAM,kBAAkB,CAAA;AAEzB;;;;;;GAMG;AACH,MAAM,WAAW,SAAS;IACxB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;CACnD;AAQD,cAAM,iBAAkB,SAAQ,SAAS;IACvC,OAAO,CAAC,wBAAwB,CAAC,CAAa;gBAElC,QAAQ,EAAE,QAAQ;IAc9B,MAAM,CAAC,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC;IAI7B,MAAM,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,SAAS,CAAC,EAAE,mBAAmB,CAAC,IAAI,CAAC;CA4C5E;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,gHAA+B,CAAA;AAEpD;;;GAGG;AACH,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

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.0",
+  "version": "0.21.1",
   "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.21.0",
+  "version": "0.21.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/table/Table.ts

@@ -1,9 +1,9 @@
 import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
-import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
+import { styleMap } from "../../lib/styleMap.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 

package/src/lib/styleMap.ts

@@ -0,0 +1,139 @@
+/* eslint-disable prefer-template,no-param-reassign,no-restricted-syntax,guard-for-in */
+
+/**
+ * The original lit styleMap directive is not compatible with a strict style-src content security policy.
+ * There is an an open issue about this in the lit repository:
+ * https://github.com/lit/lit/issues/4719
+ *
+ * This file contains a custom implementation of the styleMap directive that bypasses
+ * the render method and directly updates the styles using the .style.setProperty and
+ * .style.removeProperty methods.
+ *
+ * In the original implementation, the render method returns a string that is set as the
+ * value of the style attribute. This approach is blocked by strict CSPs that disallow
+ * inline styles.
+ *
+ * As we don't support SSR in this library, we can safely skip the render method.
+ */
+
+import { AttributePart, noChange, nothing } from "lit"
+import {
+  directive,
+  Directive,
+  DirectiveParameters,
+  PartInfo,
+  PartType,
+} from "lit/directive.js"
+
+/**
+ * A key-value set of CSS properties and values.
+ *
+ * The key should be either a valid CSS property name string, like
+ * `'background-color'`, or a valid JavaScript camel case property name
+ * for CSSStyleDeclaration like `backgroundColor`.
+ */
+export interface StyleInfo {
+  [name: string]: string | number | undefined | null
+}
+
+const important = "important"
+// The leading space is important
+const importantFlag = " !" + important
+// How many characters to remove from a value, as a negative number
+const flagTrim = 0 - importantFlag.length
+
+class StyleMapDirective extends Directive {
+  private _previousStyleProperties?: Set<string>
+
+  constructor(partInfo: PartInfo) {
+    super(partInfo)
+    if (
+      partInfo.type !== PartType.ATTRIBUTE ||
+      partInfo.name !== "style" ||
+      (partInfo.strings?.length as number) > 2
+    ) {
+      throw new Error(
+        "The `styleMap` directive must be used in the `style` attribute " +
+          "and must be the only part in the attribute.",
+      )
+    }
+  }
+
+  render(_styleInfo: Readonly<StyleInfo>) {
+    return nothing
+  }
+
+  override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {
+    const { style } = part.element as HTMLElement
+
+    if (this._previousStyleProperties === undefined) {
+      this._previousStyleProperties = new Set(Object.keys(styleInfo))
+    }
+
+    // Remove old properties that no longer exist in styleInfo
+    for (const name of this._previousStyleProperties) {
+      // If the name isn't in styleInfo or it's null/undefined
+      if (styleInfo[name] == null) {
+        this._previousStyleProperties!.delete(name)
+        if (name.includes("-")) {
+          style.removeProperty(name)
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ;(style as any)[name] = null
+        }
+      }
+    }
+
+    // Add or update properties
+    for (const name in styleInfo) {
+      const value = styleInfo[name]
+      if (value != null) {
+        this._previousStyleProperties.add(name)
+        const isImportant =
+          typeof value === "string" && value.endsWith(importantFlag)
+        if (name.includes("-") || isImportant) {
+          style.setProperty(
+            name,
+            isImportant
+              ? (value as string).slice(0, flagTrim)
+              : (value as string),
+            isImportant ? important : "",
+          )
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ;(style as any)[name] = value
+        }
+      }
+    }
+    return noChange
+  }
+}
+
+/**
+ * !A custom implementation of lit's `styleMap` directive!
+ * A directive that applies CSS properties to an element.
+ *
+ * `styleMap` can only be used in the `style` attribute and must be the only
+ * expression in the attribute. It takes the property names in the
+ * {@link StyleInfo styleInfo} object and adds the properties to the inline
+ * style of the element.
+ *
+ * Property names with dashes (`-`) are assumed to be valid CSS
+ * property names and set on the element's style object using `setProperty()`.
+ * Names without dashes are assumed to be camelCased JavaScript property names
+ * and set on the element's style object using property assignment, allowing the
+ * style object to translate JavaScript-style names to CSS property names.
+ *
+ * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':
+ * '0'})` sets the `background-color`, `border-top` and `--size` properties.
+ *
+ * @param styleInfo
+ * @see {@link https://lit.dev/docs/templates/directives/#stylemap styleMap code samples on Lit.dev}
+ */
+export const styleMap = directive(StyleMapDirective)
+
+/**
+ * The type of the class that powers this directive. Necessary for naming the
+ * directive's return type.
+ */
+export type { StyleMapDirective }