@statistikzh/leu 0.27.0 → 0.28.1

package/dist/leu-placeholder.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuPlaceholder } from "./Placeholder-DHMexMhK.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuPlaceholder } from "./Placeholder-CnGzCZ5-.js";
 //#region src/components/placeholder/leu-placeholder.ts
 LeuPlaceholder.define("leu-placeholder");
 //#endregion

package/dist/leu-popup.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuPopup } from "./Popup-Btgm2a3D.js";
+import { t as LeuPopup } from "./Popup-B5iDSLIO.js";
 
 //#region src/components/popup/leu-popup.d.ts
 declare global {

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuPopup } from "./Popup-8jhVy8gB.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuPopup } from "./Popup-BiN_tZDN.js";
 //#region src/components/popup/leu-popup.ts
 LeuPopup.define("leu-popup");
 //#endregion

package/dist/leu-progress-bar.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuProgressBar } from "./ProgressBar-CG0_lHfS.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuProgressBar } from "./ProgressBar-BfJo_KyU.js";
 //#region src/components/progress-bar/leu-progress-bar.ts
 LeuProgressBar.define("leu-progress-bar");
 //#endregion

package/dist/leu-radio-group.js

@@ -1,6 +1,6 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Radio-DG3xqP3s.js";
-import { t as LeuRadioGroup } from "./RadioGroup-BKCp9ICX.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Radio-CV7vuQUj.js";
+import { t as LeuRadioGroup } from "./RadioGroup-C3XWSScc.js";
 //#region src/components/radio/leu-radio-group.ts
 LeuRadioGroup.define("leu-radio-group");
 //#endregion

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuRadio } from "./Radio-DG3xqP3s.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuRadio } from "./Radio-CV7vuQUj.js";
 //#region src/components/radio/leu-radio.ts
 LeuRadio.define("leu-radio");
 //#endregion

package/dist/leu-range.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuRange } from "./Range-7LrESv4K.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuRange } from "./Range-C8RVrIM9.js";
 //#region src/components/range/leu-range.ts
 LeuRange.define("leu-range");
 //#endregion

package/dist/leu-scroll-top.js

@@ -1,9 +1,9 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import { t as LeuScrollTop } from "./ScrollTop-CJJsfniA.js";
+import { t as LeuScrollTop } from "./ScrollTop-B_TJ_k4m.js";
 //#region src/components/scroll-top/leu-scroll-top.ts
 LeuScrollTop.define("leu-scroll-top");
 //#endregion

package/dist/leu-select.js

@@ -1,13 +1,13 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./MenuItem-Cs3KFhJm.js";
-import "./Menu-Cu8eIF1T.js";
-import "./Popup-8jhVy8gB.js";
-import "./Input-DBXX7ev8.js";
-import { t as LeuSelect } from "./Select-CxEDXIBn.js";
+import "./MenuItem-ICjLCGim.js";
+import "./Menu-CFLCnI34.js";
+import "./Popup-BiN_tZDN.js";
+import "./Input-OrILqlax.js";
+import { t as LeuSelect } from "./Select-CbPTrL3G.js";
 //#region src/components/select/leu-select.ts
 LeuSelect.define("leu-select");
 //#endregion

package/dist/leu-spinner.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuSpinner } from "./Spinner-CrM1enM0.js";
+import { t as LeuSpinner } from "./Spinner-DHYaX6-Y.js";
 
 //#region src/components/spinner/leu-spinner.d.ts
 declare global {

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuSpinner } from "./Spinner-VhKfzI3Q.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuSpinner } from "./Spinner-ChKJQJTN.js";
 //#region src/components/spinner/leu-spinner.ts
 LeuSpinner.define("leu-spinner");
 //#endregion

package/dist/leu-tab-group.d.ts

@@ -0,0 +1,10 @@
+import { LeuTabGroup } from "./TabGroup.js";
+
+//#region src/components/tab/leu-tab-group.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab-group": LeuTabGroup;
+  }
+}
+//#endregion
+export { LeuTabGroup };

package/dist/leu-tab-group.js

@@ -0,0 +1,8 @@
+import "./LeuElement-C_lcHzQI.js";
+import "./Tab-BJbzY1xd.js";
+import "./TabPanel-CTyw410b.js";
+import { t as LeuTabGroup } from "./TabGroup-BIaCHrKR.js";
+//#region src/components/tab/leu-tab-group.ts
+LeuTabGroup.define("leu-tab-group");
+//#endregion
+export { LeuTabGroup };

package/dist/leu-tab-panel.d.ts

@@ -0,0 +1,10 @@
+import { t as LeuTabPanel } from "./TabPanel-DQgWP7LO.js";
+
+//#region src/components/tab/leu-tab-panel.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab-panel": LeuTabPanel;
+  }
+}
+//#endregion
+export { LeuTabPanel };

package/dist/leu-tab-panel.js

@@ -0,0 +1,6 @@
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTabPanel } from "./TabPanel-CTyw410b.js";
+//#region src/components/tab/leu-tab-panel.ts
+LeuTabPanel.define("leu-tab-panel");
+//#endregion
+export { LeuTabPanel };

package/dist/leu-tab.d.ts

@@ -0,0 +1,10 @@
+import { t as LeuTab } from "./Tab-CN97q0nj.js";
+
+//#region src/components/tab/leu-tab.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab": LeuTab;
+  }
+}
+//#endregion
+export { LeuTab };

package/dist/leu-tab.js

@@ -0,0 +1,6 @@
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTab } from "./Tab-BJbzY1xd.js";
+//#region src/components/tab/leu-tab.ts
+LeuTab.define("leu-tab");
+//#endregion
+export { LeuTab };

package/dist/leu-table.js

@@ -1,11 +1,11 @@
-import "./LeuElement-k4RjIeoG.js";
-import "./Icon-CbZXpyHU.js";
-import "./Spinner-VhKfzI3Q.js";
-import "./Button-BSyDL_cV.js";
+import "./LeuElement-C_lcHzQI.js";
+import "./Icon-D8HTPEFH.js";
+import "./Spinner-ChKJQJTN.js";
+import "./Button-D1aYnunQ.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./VisuallyHidden-Co_txzxB.js";
-import "./Pagination-CB2eVlXk.js";
-import { t as LeuTable } from "./Table-rg_JCtsA.js";
+import "./VisuallyHidden-DF2q9pTa.js";
+import "./Pagination-D1tP5FrM.js";
+import { t as LeuTable } from "./Table-D3QmePJd.js";
 //#region src/components/table/leu-table.ts
 LeuTable.define("leu-table");
 //#endregion

package/dist/leu-tag.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuTag } from "./Tag-BROUaDAZ.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuTag } from "./Tag-nUnWtHYy.js";
 //#region src/components/tag/leu-tag.ts
 LeuTag.define("leu-tag");
 //#endregion

package/dist/leu-visually-hidden.d.ts

@@ -1,4 +1,4 @@
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-OeQvhxYn.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-CB7aRJzF.js";
 
 //#region src/components/visually-hidden/leu-visually-hidden.d.ts
 declare global {

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
-import "./LeuElement-k4RjIeoG.js";
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-Co_txzxB.js";
+import "./LeuElement-C_lcHzQI.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-DF2q9pTa.js";
 //#region src/components/visually-hidden/leu-visually-hidden.ts
 LeuVisuallyHidden.define("leu-visually-hidden");
 //#endregion

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",
@@ -59,7 +70,7 @@
         },
         {
           "name": "type",
-          "description": "The `type` of the underlying button element.",
+          "description": "The `type` of the underlying button element. Ignored when `href` is set.",
           "values": [
             { "name": "button" },
             { "name": "submit" },
@@ -68,12 +79,27 @@
         },
         {
           "name": "componentRole",
-          "description": "The `role` of the underlying button element.",
+          "description": "The `role` of the underlying button element. Ignored when `href` is set.",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "If set, renders the button as an <a> element instead of a <button> with the provided href.",
           "values": []
         },
+        {
+          "name": "target",
+          "description": "Tells the browser where to display the linked URL. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
         {
           "name": "disabled",
-          "description": "Whether the button is disabled or not.",
+          "description": "Whether the button is disabled or not. Ignored when `href` is set.",
           "values": []
         },
         {
@@ -96,11 +122,6 @@
           "description": "Whether the button is expanded or not.\nOnly has an effect on the variant `ghost` to show an expanding icon.\nIf the property is not set, the icon will not be shown.\nIf it is set, the icon will either show an expanded or collapsed state.",
           "values": [{ "name": "true" }, { "name": "false" }]
         },
-        {
-          "name": "fluid",
-          "description": "Alters the shape of the button to be full width of its parent container",
-          "values": []
-        },
         {
           "name": "loading",
           "description": "Replaces the content with a spinner",
@@ -114,17 +135,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.",
@@ -859,6 +869,64 @@
         }
       ]
     },
+    {
+      "name": "leu-tab",
+      "description": "Tab Button.\n---\n\n\n### **Events:**\n - **leu:tab-select**",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Name to link Button and Panel together",
+          "values": []
+        },
+        { "name": "active", "description": "Is active", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/tab"
+        }
+      ]
+    },
+    {
+      "name": "leu-tab-group",
+      "description": "Tab Group\n---\n\n\n### **Methods:**\n \n\n### **Slots:**\n - **tabs** - Slot for the leu-tab elements\n- **panels** - Slot for the leu-tab-panel elements",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Label for the tab list, used for accessibility.\nContent will not be visible on the page, but should be provided for screen readers.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/tab-group"
+        }
+      ]
+    },
+    {
+      "name": "leu-tab-panel",
+      "description": "Tab Panel\n---\n\n\n### **Events:**\n - **leu:show-tab-panel** - Fired when a tab panel is shown",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "Name of the tab. Apply the same name to the corresponding tab button to link them together.\nHas to be unique within the tab component.",
+          "values": []
+        },
+        { "name": "active", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/tab-panel"
+        }
+      ]
+    },
     {
       "name": "leu-table",
       "description": "\n---\n",

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";
@@ -28,6 +28,9 @@ import type { LeuRange, CustomEvent } from "../Range.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
 import type { LeuSpinner } from "../Spinner.js";
+import type { LeuTab, CustomEvent } from "../Tab.js";
+import type { LeuTabGroup } from "../TabGroup.js";
+import type { LeuTabPanel, CustomEvent } from "../TabPanel.js";
 import type { LeuTable } from "../Table.js";
 import type { LeuTag } from "../Tag.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
@@ -43,6 +46,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. */
@@ -51,11 +61,15 @@ Use it to provide a label when only an icon is visible. */
   size?: LeuButton["size"];
   /** The visual variant of the button. */
   variant?: LeuButton["variant"];
-  /** The `type` of the underlying button element. */
+  /** The `type` of the underlying button element. Ignored when `href` is set. */
   type?: LeuButton["type"];
-  /** The `role` of the underlying button element. */
+  /** The `role` of the underlying button element. Ignored when `href` is set. */
   componentRole?: LeuButton["componentRole"];
-  /** Whether the button is disabled or not. */
+  /** If set, renders the button as an <a> element instead of a <button> with the provided href. */
+  href?: LeuButton["href"];
+  /** Tells the browser where to display the linked URL. Only used when `href` is set. */
+  target?: LeuButton["target"];
+  /** Whether the button is disabled or not. Ignored when `href` is set. */
   disabled?: LeuButton["disabled"];
   /** Whether the button should be round.
 Can only be applied when the button contains an icon without a visible label. */
@@ -70,19 +84,10 @@ Only has an effect on the variant `ghost` to show an expanding icon.
 If the property is not set, the icon will not be shown.
 If it is set, the icon will either show an expanded or collapsed state. */
   expanded?: LeuButton["expanded"];
-  /** Alters the shape of the button to be full width of its parent container */
-  fluid?: LeuButton["fluid"];
   /** Replaces the content with a spinner */
   loading?: LeuButton["loading"];
 };
 
-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. */
@@ -450,6 +455,35 @@ finds all the options that match the given values and selects them. */
 
 type LeuSpinnerProps = {};
 
+type LeuTabProps = {
+  /** Name to link Button and Panel together */
+  name?: LeuTab["name"];
+  /** Is active */
+  active?: LeuTab["active"];
+
+  /**  */
+  "onleu:tab-select"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type LeuTabGroupProps = {
+  /** Label for the tab list, used for accessibility.
+Content will not be visible on the page, but should be provided for screen readers. */
+  label?: LeuTabGroup["label"];
+  /** Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel. */
+  active?: LeuTabGroup["active"];
+};
+
+type LeuTabPanelProps = {
+  /** Name of the tab. Apply the same name to the corresponding tab button to link them together.
+Has to be unique within the tab component. */
+  name?: LeuTabPanel["name"];
+  /**  */
+  active?: LeuTabPanel["active"];
+
+  /** Fired when a tab panel is shown */
+  "onleu:show-tab-panel"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type LeuTableProps = {
   /**  */
   columns?: LeuTable["columns"];
@@ -499,18 +533,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.
@@ -525,6 +547,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.
    * ---
@@ -813,6 +847,40 @@ export type CustomElements = {
    */
   "leu-spinner": DefineComponent<LeuSpinnerProps>;
 
+  /**
+   * Tab Button.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **leu:tab-select**
+   */
+  "leu-tab": DefineComponent<LeuTabProps>;
+
+  /**
+   * Tab Group
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *
+   *
+   * ### **Slots:**
+   *  - **tabs** - Slot for the leu-tab elements
+   * - **panels** - Slot for the leu-tab-panel elements
+   */
+  "leu-tab-group": DefineComponent<LeuTabGroupProps>;
+
+  /**
+   * Tab Panel
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **leu:show-tab-panel** - Fired when a tab panel is shown
+   */
+  "leu-tab-panel": DefineComponent<LeuTabPanelProps>;
+
   /**
    *
    * ---