@statistikzh/leu 0.26.0 → 0.28.0

package/dist/leu-table.js

@@ -1,11 +1,11 @@
-import "./LeuElement-BeFrgKes.js";
-import "./Icon-C_yYuynf.js";
-import "./Spinner-DDTqijTO.js";
-import "./Button-BkhqVjug.js";
+import "./LeuElement-DQI8cqZV.js";
+import "./Icon-D83qesg5.js";
+import "./Spinner-BBiVZxFH.js";
+import "./Button-DyNVOHCd.js";
 import "./FormAssociatedMixin-DLPvFtbT.js";
-import "./VisuallyHidden-pll3amXE.js";
-import "./Pagination-DJI5MIi_.js";
-import { t as LeuTable } from "./Table-BgCxfBcm.js";
+import "./VisuallyHidden-CpYXyuC7.js";
+import "./Pagination-CIy7YvWE.js";
+import { t as LeuTable } from "./Table-DiYqIzBu.js";
 //#region src/components/table/leu-table.ts
 LeuTable.define("leu-table");
 //#endregion

package/dist/leu-tag.js

@@ -1,5 +1,5 @@
-import "./LeuElement-BeFrgKes.js";
-import { t as LeuTag } from "./Tag-DK2KkPIQ.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuTag } from "./Tag-Ct8Hhv7W.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-BeFrgKes.js";
-import { t as LeuVisuallyHidden } from "./VisuallyHidden-pll3amXE.js";
+import "./LeuElement-DQI8cqZV.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-CpYXyuC7.js";
 //#region src/components/visually-hidden/leu-visually-hidden.ts
 LeuVisuallyHidden.define("leu-visually-hidden");
 //#endregion

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

@@ -59,7 +59,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 +68,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 +111,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",
@@ -308,7 +318,7 @@
     },
     {
       "name": "leu-file-input",
-      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
       "attributes": [
         { "name": "label", "values": [] },
         {
@@ -380,11 +390,6 @@
           "description": "Adds a button to clear the input element",
           "values": []
         },
-        {
-          "name": "value",
-          "description": "The value of the input element.",
-          "values": []
-        },
         {
           "name": "error",
           "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -459,6 +464,11 @@
           "name": "novalidate",
           "description": "Disables the browser's validation.",
           "values": []
+        },
+        {
+          "name": "value",
+          "description": "The default value of the input element.",
+          "values": []
         }
       ],
       "references": [
@@ -808,22 +818,12 @@
     },
     {
       "name": "leu-select",
-      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+      "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
       "attributes": [
         {
           "name": "value",
-          "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-          "values": [{ "name": "array" }]
-        },
-        {
-          "name": "name",
-          "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "The expanded state of the popup",
-          "values": []
+          "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+          "values": [{ "name": "Array<string>" }]
         },
         {
           "name": "label",
@@ -835,11 +835,6 @@
           "description": "Show a clearable button to reset the value",
           "values": []
         },
-        {
-          "name": "disabled",
-          "description": "If the select should be disabled",
-          "values": []
-        },
         {
           "name": "filterable",
           "description": "Show an input field to filter the options inside the popup",
@@ -850,9 +845,11 @@
           "description": "Allow multiple selections",
           "values": []
         },
-        { "name": "_optionFilter", "values": [] },
-        { "name": "_hasFilterResults", "values": [] },
-        { "name": "_displayValue", "values": [] }
+        {
+          "name": "required",
+          "description": "Marks the input element as required",
+          "values": []
+        }
       ],
       "references": [
         {
@@ -872,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

@@ -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";
@@ -51,11 +54,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,8 +77,6 @@ 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"];
 };
@@ -213,8 +218,6 @@ type LeuInputProps = {
   required?: LeuInput["required"];
   /** Adds a button to clear the input element */
   clearable?: LeuInput["clearable"];
-  /** The value of the input element. */
-  value?: LeuInput["value"];
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   error?: LeuInput["error"];
   /** The label of the input element */
@@ -245,6 +248,10 @@ type LeuInputProps = {
   validationMessages?: LeuInput["validationMessages"];
   /** Disables the browser's validation. */
   novalidate?: LeuInput["novalidate"];
+  /** The default value of the input element. */
+  value?: LeuInput["defaultValue"];
+  /** The value of the input element. */
+  value?: LeuInput["value"];
   /**  */
   _validity?: LeuInput["_validity"];
   /**  */
@@ -429,38 +436,54 @@ type LeuScrollTopProps = {
 };
 
 type LeuSelectProps = {
-  /** List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them. */
-  value?: LeuSelect["value"];
-  /** Reflects to the name attribute of the hidden input field that would be used in a form */
-  name?: LeuSelect["name"];
-  /** The expanded state of the popup */
-  open?: LeuSelect["open"];
+  /** The default value of the select. Corresponds to the `value` HTML attribute. */
+  value?: LeuSelect["defaultValue"];
   /** The label of the select */
   label?: LeuSelect["label"];
   /** Show a clearable button to reset the value */
   clearable?: LeuSelect["clearable"];
-  /** If the select should be disabled */
-  disabled?: LeuSelect["disabled"];
   /** Show an input field to filter the options inside the popup */
   filterable?: LeuSelect["filterable"];
   /** Allow multiple selections */
   multiple?: LeuSelect["multiple"];
-  /**  */
-  _optionFilter?: LeuSelect["_optionFilter"];
-  /**  */
-  _hasFilterResults?: LeuSelect["_hasFilterResults"];
-  /**  */
-  _displayValue?: LeuSelect["_displayValue"];
-  /**  */
-  _optionFilterRef?: LeuSelect["_optionFilterRef"];
-  /**  */
-  _toggleButtonRef?: LeuSelect["_toggleButtonRef"];
-  /**  */
-  _menuRef?: LeuSelect["_menuRef"];
+  /** Marks the input element as required */
+  required?: LeuSelect["required"];
+  /** List of selected values. If they're set from outside the component, the select element
+finds all the options that match the given values and selects them. */
+  value?: LeuSelect["value"];
 };
 
 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"];
@@ -644,6 +667,9 @@ export type CustomElements = {
    * ### **Events:**
    *  - **input**
    * - **change**
+   *
+   * ### **Methods:**
+   *
    */
   "leu-file-input": DefineComponent<LeuFileInputProps>;
 
@@ -802,8 +828,8 @@ export type CustomElements = {
    *  - **_updateMenuItems(changed)** - Apply the current state to the menu items.
    * - Set the active property when the value property has changed.
    * - Hide menu items that do not match the filter.
-   * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
-   * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
+   * - **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.
+   * - **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.
    *
    * ### **Slots:**
    *  - **before** - Optional content the appears before the option list
@@ -821,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>;
+
   /**
    *
    * ---