@statistikzh/leu 0.22.1 → 0.24.0

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

@@ -109,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-checkbox",
       "description": "\n---\n",
@@ -147,17 +158,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.",
@@ -175,74 +175,6 @@
         }
       ]
     },
-    {
-      "name": "leu-dropdown",
-      "description": "\n---\n",
-      "attributes": [
-        { "name": "label", "values": [] },
-        { "name": "expanded", "values": [] },
-        { "name": "inverted", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/dropdown"
-        }
-      ]
-    },
-    {
-      "name": "leu-dialog",
-      "description": "\n---\n",
-      "attributes": [
-        { "name": "label", "values": [] },
-        { "name": "sublabel", "values": [] },
-        { "name": "open", "values": [] }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/dialog"
-        }
-      ]
-    },
-    {
-      "name": "leu-file-input",
-      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
-      "attributes": [
-        { "name": "label", "values": [] },
-        {
-          "name": "accept",
-          "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Whether the file input is disabled.",
-          "values": []
-        },
-        {
-          "name": "multiple",
-          "description": "Whether the file input allows multiple files.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Whether the file input is required.",
-          "values": []
-        },
-        {
-          "name": "variant",
-          "description": "The variant of the file list item. `filled` renders a gray background.",
-          "values": [{ "name": "filled" }, { "name": "transparent" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/file-input"
-        }
-      ]
-    },
     {
       "name": "leu-chip-group",
       "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place leu-chip-* elements inside this slot\n\n### **CSS Properties:**\n - **--leu-chip-group-gap** - The gap between the chips _(default: undefined)_",
@@ -340,6 +272,59 @@
         }
       ]
     },
+    {
+      "name": "leu-dropdown",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "label", "values": [] },
+        { "name": "expanded", "values": [] },
+        { "name": "inverted", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/dropdown"
+        }
+      ]
+    },
+    {
+      "name": "leu-file-input",
+      "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+      "attributes": [
+        { "name": "label", "values": [] },
+        {
+          "name": "accept",
+          "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the file input is disabled.",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "Whether the file input allows multiple files.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Whether the file input is required.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The variant of the file list item. `filled` renders a gray background.",
+          "values": [{ "name": "filled" }, { "name": "transparent" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/file-input"
+        }
+      ]
+    },
     {
       "name": "leu-icon",
       "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
@@ -469,6 +454,21 @@
         }
       ]
     },
+    {
+      "name": "leu-dialog",
+      "description": "\n---\n",
+      "attributes": [
+        { "name": "label", "values": [] },
+        { "name": "sublabel", "values": [] },
+        { "name": "open", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/dialog"
+        }
+      ]
+    },
     {
       "name": "leu-menu",
       "description": "\n---\n",
@@ -625,6 +625,21 @@
             { "name": "both" }
           ]
         },
+        {
+          "name": "offset-main-axis",
+          "description": "Offsets the popup along the main axis.",
+          "values": []
+        },
+        {
+          "name": "offset-cross-axis",
+          "description": "Offsets the popup along the cross axis.",
+          "values": []
+        },
+        {
+          "name": "offset-alignment-axis",
+          "description": "Offsets the popup along the alignment axis.\nOverrides the `offsetCrossAxis` value.",
+          "values": []
+        },
         {
           "name": "autoSize",
           "values": [
@@ -713,13 +728,62 @@
       "description": "\n---\n\n\n### **Methods:**\n ",
       "attributes": [
         { "name": "value", "values": [{ "name": "array" }] },
-        { "name": "min", "values": [] },
-        { "name": "max", "values": [] },
-        { "name": "step", "values": [] },
+        {
+          "name": "min",
+          "description": "The minimum value of the range slider.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum value of the range slider.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The step size of the range slider.",
+          "values": []
+        },
         { "name": "name", "values": [] },
-        { "name": "label", "values": [] },
-        { "name": "disabled", "values": [] },
-        { "name": "multiple", "values": [] }
+        {
+          "name": "label",
+          "description": "The label of the range slider.",
+          "values": []
+        },
+        {
+          "name": "hide-label",
+          "description": "Whether to hide the label of the range slider.\nIf true, the label will still be available for screen readers\nand is only visually hidden.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the range slider is disabled.",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "Whether to use a range with two handles.",
+          "values": []
+        },
+        {
+          "name": "show-ticks",
+          "description": "Wheter to show tick marks below the range slider.\nOne tick mark per step will be rendered.",
+          "values": []
+        },
+        {
+          "name": "show-range-labels",
+          "description": "Whether to show the min and max labels below the range slider.",
+          "values": []
+        },
+        {
+          "name": "prefix",
+          "description": "A prefix to display before the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+          "values": []
+        },
+        {
+          "name": "suffix",
+          "description": "A suffix to display after the value in the output element(s).\nIs ignored if a custom valueFormatter is provided.",
+          "values": []
+        }
       ],
       "references": [
         {

package/dist/vue/index.d.ts

@@ -2,19 +2,19 @@ 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 { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
-import type { LeuButtonGroup } from "../ButtonGroup.js";
 import type { LeuChartWrapper } from "../ChartWrapper.js";
-import type { LeuDropdown } from "../Dropdown.js";
-import type { LeuDialog } from "../Dialog.js";
-import type { LeuFileInput, CustomEvent } from "../FileInput.js";
 import type { LeuChipGroup } from "../ChipGroup.js";
 import type { LeuChipLink } from "../ChipLink.js";
 import type { LeuChipRemovable } from "../ChipRemovable.js";
 import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
+import type { LeuDropdown } from "../Dropdown.js";
+import type { LeuFileInput, CustomEvent } from "../FileInput.js";
 import type { LeuIcon } from "../Icon.js";
 import type { LeuInput, CustomEvent } from "../Input.js";
+import type { LeuDialog } from "../Dialog.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
 import type { LeuMessage, CustomEvent } from "../Message.js";
@@ -74,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 LeuCheckboxProps = {
   /**  */
   checked?: LeuCheckbox["checked"];
@@ -94,13 +101,6 @@ type LeuCheckboxGroupProps = {
   value?: LeuCheckboxGroup["value"];
 };
 
-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. */
@@ -109,51 +109,6 @@ When set to `true`, a spinner will be shown in the chart container. */
   hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
-type LeuDropdownProps = {
-  /**  */
-  label?: LeuDropdown["label"];
-  /**  */
-  expanded?: LeuDropdown["expanded"];
-  /**  */
-  inverted?: LeuDropdown["inverted"];
-};
-
-type LeuDialogProps = {
-  /**  */
-  label?: LeuDialog["label"];
-  /**  */
-  sublabel?: LeuDialog["sublabel"];
-  /**  */
-  open?: LeuDialog["open"];
-};
-
-type LeuFileInputProps = {
-  /**  */
-  label?: LeuFileInput["label"];
-  /** A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
-  accept?: LeuFileInput["accept"];
-  /** Whether the file input is disabled. */
-  disabled?: LeuFileInput["disabled"];
-  /** Whether the file input allows multiple files. */
-  multiple?: LeuFileInput["multiple"];
-  /** Whether the file input is required. */
-  required?: LeuFileInput["required"];
-  /** The variant of the file list item. `filled` renders a gray background. */
-  variant?: LeuFileInput["variant"];
-  /**  */
-  files?: LeuFileInput["files"];
-  /**  */
-  input?: LeuFileInput["input"];
-  /**  */
-  form?: LeuFileInput["form"];
-  /**  */
-  name?: LeuFileInput["name"];
-  /**  */
-  oninput?: (e: CustomEvent<CustomEvent>) => void;
-  /**  */
-  onchange?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 type LeuChipGroupProps = {
   /**  */
   inverted?: LeuChipGroup["inverted"];
@@ -203,6 +158,42 @@ type LeuChipSelectableProps = {
   oninput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuDropdownProps = {
+  /**  */
+  label?: LeuDropdown["label"];
+  /**  */
+  expanded?: LeuDropdown["expanded"];
+  /**  */
+  inverted?: LeuDropdown["inverted"];
+};
+
+type LeuFileInputProps = {
+  /**  */
+  label?: LeuFileInput["label"];
+  /** A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+  accept?: LeuFileInput["accept"];
+  /** Whether the file input is disabled. */
+  disabled?: LeuFileInput["disabled"];
+  /** Whether the file input allows multiple files. */
+  multiple?: LeuFileInput["multiple"];
+  /** Whether the file input is required. */
+  required?: LeuFileInput["required"];
+  /** The variant of the file list item. `filled` renders a gray background. */
+  variant?: LeuFileInput["variant"];
+  /**  */
+  files?: LeuFileInput["files"];
+  /**  */
+  input?: LeuFileInput["input"];
+  /**  */
+  form?: LeuFileInput["form"];
+  /**  */
+  name?: LeuFileInput["name"];
+  /**  */
+  oninput?: (e: CustomEvent<CustomEvent>) => void;
+  /**  */
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type LeuIconProps = {
   /** The name of the icon to display. */
   name?: LeuIcon["name"];
@@ -259,6 +250,15 @@ type LeuInputProps = {
   onchange?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuDialogProps = {
+  /**  */
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
+};
+
 type LeuMenuProps = {
   /** This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'. */
   selects?: LeuMenu["selects"];
@@ -334,6 +334,13 @@ type LeuPopupProps = {
   shiftPadding?: LeuPopup["shiftPadding"];
   /**  */
   matchSize?: LeuPopup["matchSize"];
+  /** Offsets the popup along the main axis. */
+  "offset-main-axis"?: LeuPopup["offsetMainAxis"];
+  /** Offsets the popup along the cross axis. */
+  "offset-cross-axis"?: LeuPopup["offsetCrossAxis"];
+  /** Offsets the popup along the alignment axis.
+Overrides the `offsetCrossAxis` value. */
+  "offset-alignment-axis"?: LeuPopup["offsetAlignmentAxis"];
   /**  */
   autoSize?: LeuPopup["autoSize"];
   /**  */
@@ -372,20 +379,38 @@ type LeuRadioGroupProps = {
 type LeuRangeProps = {
   /**  */
   value?: LeuRange["defaultValue"];
-  /**  */
+  /** The minimum value of the range slider. */
   min?: LeuRange["min"];
-  /**  */
+  /** The maximum value of the range slider. */
   max?: LeuRange["max"];
-  /**  */
+  /** The step size of the range slider. */
   step?: LeuRange["step"];
   /**  */
   name?: LeuRange["name"];
-  /**  */
+  /** The label of the range slider. */
   label?: LeuRange["label"];
-  /**  */
+  /** Whether to hide the label of the range slider.
+If true, the label will still be available for screen readers
+and is only visually hidden. */
+  "hide-label"?: LeuRange["hideLabel"];
+  /** Whether the range slider is disabled. */
   disabled?: LeuRange["disabled"];
-  /**  */
+  /** Whether to use a range with two handles. */
   multiple?: LeuRange["multiple"];
+  /** Wheter to show tick marks below the range slider.
+One tick mark per step will be rendered. */
+  "show-ticks"?: LeuRange["showTicks"];
+  /** Whether to show the min and max labels below the range slider. */
+  "show-range-labels"?: LeuRange["showRangeLabels"];
+  /** A prefix to display before the value in the output element(s).
+Is ignored if a custom valueFormatter is provided. */
+  prefix?: LeuRange["prefix"];
+  /** A suffix to display after the value in the output element(s).
+Is ignored if a custom valueFormatter is provided. */
+  suffix?: LeuRange["suffix"];
+  /** A custom function to format the value displayed in the output element(s).
+If provided, the prefix and suffix properties will be ignored. */
+  valueFormatter?: LeuRange["valueFormatter"];
   /** Sets the value of the underlying input element(s).
 The value has to be an array if "multiple" range is used.
 Otherwise it has to be a string. */
@@ -497,23 +522,6 @@ export type CustomElements = {
    */
   "leu-button": DefineComponent<LeuButtonProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
-
-  /**
-   *
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Place the checkboxes inside the default slot.
-   */
-  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
-
   /**
    * A radio input-like button group component.
    * It allows only one button to be active at a time.
@@ -528,44 +536,36 @@ export type CustomElements = {
    */
   "leu-button-group": DefineComponent<LeuButtonGroupProps>;
 
-  /**
-   * A wrapper element for charts.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.
-   * - **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.
-   * - **chart** - The actual chart
-   * - **caption** - A caption for the chart, e.g. a source or explanation of the data.
-   * - **download** - A download button or dropdown to export the chart in different formats.
-   */
-  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
-
   /**
    *
    * ---
    *
    */
-  "leu-dropdown": DefineComponent<LeuDropdownProps>;
+  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
 
   /**
    *
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the checkboxes inside the default slot.
    */
-  "leu-dialog": DefineComponent<LeuDialogProps>;
+  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
 
   /**
-   *
+   * A wrapper element for charts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **input**
-   * - **change**
+   * ### **Slots:**
+   *  - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.
+   * - **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+   * - **chart** - The actual chart
+   * - **caption** - A caption for the chart, e.g. a source or explanation of the data.
+   * - **download** - A download button or dropdown to export the chart in different formats.
    */
-  "leu-file-input": DefineComponent<LeuFileInputProps>;
+  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
 
   /**
    *
@@ -622,6 +622,24 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dropdown": DefineComponent<LeuDropdownProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **input**
+   * - **change**
+   */
+  "leu-file-input": DefineComponent<LeuFileInputProps>;
+
   /**
    * A component to render all defined zhWeb icons.
    * The `fill` of the icon is set to `currentColor` and
@@ -658,6 +676,13 @@ export type CustomElements = {
    */
   "leu-input": DefineComponent<LeuInputProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dialog": DefineComponent<LeuDialogProps>;
+
   /**
    *
    * ---