@statistikzh/leu 0.20.0 → 0.21.1

package/dist/leu-chip-removable.js

@@ -1,7 +1,7 @@
 import { LeuChipRemovable } from './ChipRemovable.js';
 import 'lit';
 import './Chip.js';
-import './LeuElement-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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-C1c3TgrG.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/vscode.html-custom-data.json

@@ -34,17 +34,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-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",
@@ -120,6 +109,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-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.",

package/dist/vue/index.d.ts

@@ -1,8 +1,8 @@
 import type { DefineComponent } from "vue";
 
 import type { LeuAccordion } from "../Accordion.js";
-import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuButton } from "../Button.js";
+import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
@@ -43,13 +43,6 @@ 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. */
@@ -81,6 +74,13 @@ 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. */
@@ -501,30 +501,30 @@ export type CustomElements = {
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
   /**
-   * A radio input-like button group component.
-   * It allows only one button to be active at a time.
-   * ---
    *
+   * ---
    *
-   * ### **Events:**
-   *  - **input** - When the value of the group changes by clicking a button
    *
    * ### **Slots:**
-   *  - _default_ - Slot for the buttons
+   *  - **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-group": DefineComponent<LeuButtonGroupProps>;
+  "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * A radio input-like button group component.
+   * It allows only one button to be active at a time.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **input** - When the value of the group changes by clicking a button
+   *
    * ### **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
+   *  - _default_ - Slot for the buttons
    */
-  "leu-button": DefineComponent<LeuButtonProps>;
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
   /**
    * 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.20.0",
+  "version": "0.21.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,33 +65,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-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",
@@ -238,6 +211,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-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.",

package/package.json

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

package/src/components/icon/paths.ts

@@ -143,6 +143,8 @@ export const paths = {
     "M12.375 8.2485V3.75L22.875 11.25L12.375 18.75V14.25C8.20012 14.2515 4.39838 14.4128 1.125 20.25C1.125 16.5424 1.66875 8.35162 12.375 8.2485Z",
   resizeText:
     "M17 8V5H20V8H17ZM11 14H14V11H11V14ZM8 20H5V17H8V20ZM14 20H11V17H14V20ZM17 14H20V11H17V14ZM20 20H17V17H20V20Z",
+  ruler:
+    "M1.5 9C1.5 8.72386 1.72386 8.5 2 8.5H22C22.2761 8.5 22.5 8.72386 22.5 9V15C22.5 15.2761 22.2761 15.5 22 15.5H2C1.72386 15.5 1.5 15.2761 1.5 15V9ZM2.5 9.5V14.5H21.5V9.5H2.5Z M4.5 11V9H5.5V11H4.5Z M8 11V9H9V11H8Z M11.5 11V9H12.5V11H11.5Z M15 11V9H16V11H15Z M18.5 11V9H19.5V11H18.5Z",
   search:
     "M0.75 9C0.75 4.4445 4.4445 0.75 9 0.75C13.5555 0.75 17.25 4.4445 17.25 9C17.25 13.5555 13.5555 17.25 9 17.25C4.4445 17.25 0.75 13.5555 0.75 9ZM17.25 15.25L15 17.5L21 23.2493L23.25 20.9993L17.25 15.25ZM9 15C5.692 15 3 12.308 3 9C3 5.692 5.692 3 9 3C12.308 3 15 5.692 15 9C15 12.308 12.308 15 9 15Z",
   securities:

package/src/components/menu/Menu.ts

@@ -149,6 +149,10 @@ export class LeuMenu extends LeuElement {
   }
 
   render() {
-    return html`<slot></slot>`
+    return html`
+      <div class="container">
+        <slot></slot>
+      </div>
+    `
   }
 }

package/src/components/menu/menu.css

@@ -13,3 +13,7 @@
   padding: 0 !important;
   background: none !important;
 }
+
+.container {
+  background-color: var(--leu-color-black-0);
+}

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"