@statistikzh/leu 0.14.4 → 0.15.1

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

@@ -34,42 +34,78 @@
         }
       ]
     },
+    {
+      "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",
       "attributes": [
-        { "name": "label", "values": [] },
-        { "name": "size", "values": [] },
-        { "name": "variant", "values": [] },
+        {
+          "name": "label",
+          "description": "`aria-label` of the underlying button elements.\nUse it to provide a label when only an icon is visible.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the button.",
+          "values": [{ "name": "regular" }, { "name": "small" }]
+        },
+        {
+          "name": "variant",
+          "description": "The visual variant of the button.",
+          "values": [
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "ghost" }
+          ]
+        },
         {
           "name": "type",
+          "description": "The `type` of the underlying button element.",
           "values": [
             { "name": "button" },
             { "name": "submit" },
             { "name": "reset" }
           ]
         },
-        { "name": "componentRole", "values": [] },
-        { "name": "disabled", "values": [] },
+        {
+          "name": "componentRole",
+          "description": "The `role` of the underlying button element.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the button is disabled or not.",
+          "values": []
+        },
         {
           "name": "round",
-          "description": "Only taken into account if no Label and an Icon is set",
+          "description": "Whether the button should be round.\nCan only be applied when the button contains an icon without a visible label.",
+          "values": []
+        },
+        {
+          "name": "active",
+          "description": "Whether the button is active or not.\nDepending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.",
           "values": []
         },
-        { "name": "active", "values": [] },
         {
           "name": "inverted",
-          "description": "will be used on dark Background",
+          "description": "Wheter the colors should be inverted. For use on dark backgrounds.",
           "values": []
         },
         {
           "name": "expanded",
-          "description": "Only taken into account if variant is \"ghost\"",
-          "values": [
-            { "name": "(\"true\"" },
-            { "name": "false" },
-            { "name": "undefined)" }
-          ]
+          "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",
@@ -85,13 +121,19 @@
       ]
     },
     {
-      "name": "leu-button-group",
-      "description": "\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": [],
+      "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.",
+      "attributes": [
+        {
+          "name": "pending",
+          "description": "Whether the chart is currently loading or not.\nWhen set to `true`, a spinner will be shown in the chart container.",
+          "values": []
+        }
+      ],
       "references": [
         {
           "name": "Documentation",
-          "url": "https://statistikzh.github.io/leu/?path=/story/button-group"
+          "url": "https://statistikzh.github.io/leu/?path=/story/chart-wrapper"
         }
       ]
     },
@@ -113,13 +155,18 @@
     },
     {
       "name": "leu-checkbox-group",
-      "description": "\n---\n",
+      "description": "\n---\n\n\n### **Slots:**\n - _default_ - Place the checkboxes inside the default slot.",
       "attributes": [
         {
           "name": "orientation",
+          "description": "Defines how the checkboxes should be aligned.",
           "values": [{ "name": "horizontal" }, { "name": "vertical" }]
         },
-        { "name": "label", "values": [] }
+        {
+          "name": "label",
+          "description": "The label of the checkbox group",
+          "values": []
+        }
       ],
       "references": [
         {
@@ -449,9 +496,16 @@
       "description": "\n---\n\n\n### **Events:**\n - **leu:pagechange**",
       "attributes": [
         { "name": "defaultPage", "values": [] },
-        { "name": "itemsPerPage", "values": [{ "name": "Number" }] },
-        { "name": "numOfItems", "values": [{ "name": "Number" }] },
-        { "name": "_page", "values": [] }
+        {
+          "name": "itemsPerPage",
+          "description": "Number of items per page.",
+          "values": []
+        },
+        {
+          "name": "numOfItems",
+          "description": "Total number of items to paginate.",
+          "values": []
+        }
       ],
       "references": [
         {
@@ -460,6 +514,17 @@
         }
       ]
     },
+    {
+      "name": "leu-placeholder",
+      "description": "* A placeholder to display when no content is available.\n---\n\n\n### **Slots:**\n - **title** - The placeholders title. Use a heading tag (h1-6) depeneding on your context.\n- **description** - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.\n- **cta** - A call to action button like \"Reload\" or \"Create\". Add a single `<leu-button>`.",
+      "attributes": [],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/placeholder"
+        }
+      ]
+    },
     {
       "name": "leu-popup",
       "description": "\n---\n",
@@ -513,13 +578,18 @@
     },
     {
       "name": "leu-radio-group",
-      "description": "\n---\n",
+      "description": "Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.\n---\n\n\n### **Slots:**\n - _default_ - Place the radio buttons inside the default slot.",
       "attributes": [
         {
           "name": "orientation",
+          "description": "Defines how the radio buttons should be aligned.",
           "values": [{ "name": "horizontal" }, { "name": "vertical" }]
         },
-        { "name": "label", "values": [] }
+        {
+          "name": "label",
+          "description": "The label of the radio group",
+          "values": []
+        }
       ],
       "references": [
         {

package/dist/vue/index.d.ts

@@ -1,8 +1,9 @@
 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, CustomEvent } from "../ButtonGroup.js";
+import type { LeuChartWrapper } from "../ChartWrapper.js";
 import type { LeuCheckbox } from "../Checkbox.js";
 import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
 import type { LeuChipGroup } from "../ChipGroup.js";
@@ -16,6 +17,7 @@ import type { LeuInput, CustomEvent } from "../Input.js";
 import type { LeuMenu } from "../Menu.js";
 import type { LeuMenuItem } from "../MenuItem.js";
 import type { LeuPagination, CustomEvent } from "../Pagination.js";
+import type { LeuPlaceholder } from "../Placeholder.js";
 import type { LeuPopup } from "../Popup.js";
 import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
@@ -37,36 +39,50 @@ 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. */
   label?: LeuButton["label"];
-  /**  */
+  /** The size of the button. */
   size?: LeuButton["size"];
-  /**  */
+  /** The visual variant of the button. */
   variant?: LeuButton["variant"];
-  /**  */
+  /** The `type` of the underlying button element. */
   type?: LeuButton["type"];
-  /**  */
+  /** The `role` of the underlying button element. */
   componentRole?: LeuButton["componentRole"];
-  /**  */
+  /** Whether the button is disabled or not. */
   disabled?: LeuButton["disabled"];
-  /** Only taken into account if no Label and an Icon is set */
+  /** Whether the button should be round.
+Can only be applied when the button contains an icon without a visible label. */
   round?: LeuButton["round"];
-  /**  */
+  /** Whether the button is active or not.
+Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element. */
   active?: LeuButton["active"];
-  /** will be used on dark Background */
+  /** Wheter the colors should be inverted. For use on dark backgrounds. */
   inverted?: LeuButton["inverted"];
-  /** Only taken into account if variant is "ghost" */
+  /** Whether the button is expanded or not.
+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"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currenty selected (active) button */
-  value?: LeuButtonGroup["value"];
-  /** When the value of the group changes by clicking a button */
-  oninput?: (e: CustomEvent<CustomEvent>) => void;
+type LeuChartWrapperProps = {
+  /** Whether the chart is currently loading or not.
+When set to `true`, a spinner will be shown in the chart container. */
+  pending?: LeuChartWrapper["pending"];
+  /**  */
+  hasSlotController?: LeuChartWrapper["hasSlotController"];
 };
 
 type LeuCheckboxProps = {
@@ -81,14 +97,12 @@ type LeuCheckboxProps = {
 };
 
 type LeuCheckboxGroupProps = {
-  /**  */
+  /** Defines how the checkboxes should be aligned. */
   orientation?: LeuCheckboxGroup["orientation"];
-  /**  */
+  /** The label of the checkbox group */
   label?: LeuCheckboxGroup["label"];
   /**  */
   value?: LeuCheckboxGroup["value"];
-  /**  */
-  items?: LeuCheckboxGroup["items"];
 };
 
 type LeuChipGroupProps = {
@@ -252,17 +266,18 @@ type LeuMenuItemProps = {
 type LeuPaginationProps = {
   /**  */
   defaultPage?: LeuPagination["defaultPage"];
-  /**  */
+  /** Number of items per page. */
   itemsPerPage?: LeuPagination["itemsPerPage"];
-  /**  */
+  /** Total number of items to paginate. */
   numOfItems?: LeuPagination["numOfItems"];
-  /**  */
-  _page?: LeuPagination["_page"];
-  /**  */
+  /** The current page number. This is a 1-based index.
+When setting this value, it will be clamped
+to the range of valid pages. */
   page?: LeuPagination["page"];
-  /**  */
+  /** The index of the first item on the current page. */
   startIndex?: LeuPagination["startIndex"];
-  /**  */
+  /** The index of the last item on the current page.
+This is exclusive, meaning it is one past the last item. */
   endIndex?: LeuPagination["endIndex"];
   /**  */
   _maxPage?: LeuPagination["_maxPage"];
@@ -270,6 +285,8 @@ type LeuPaginationProps = {
   "onleu:pagechange"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type LeuPlaceholderProps = {};
+
 type LeuPopupProps = {
   /**  */
   anchor?: LeuPopup["anchor"];
@@ -309,22 +326,12 @@ type LeuRadioProps = {
 };
 
 type LeuRadioGroupProps = {
-  /**  */
+  /** Defines how the radio buttons should be aligned. */
   orientation?: LeuRadioGroup["orientation"];
-  /**  */
+  /** The label of the radio group */
   label?: LeuRadioGroup["label"];
   /**  */
   value?: LeuRadioGroup["value"];
-  /**  */
-  handleFocusIn?: LeuRadioGroup["handleFocusIn"];
-  /**  */
-  handleKeyDown?: LeuRadioGroup["handleKeyDown"];
-  /**  */
-  handleInput?: LeuRadioGroup["handleInput"];
-  /**  */
-  _currentIndex?: LeuRadioGroup["_currentIndex"];
-  /**  */
-  items?: LeuRadioGroup["items"];
 };
 
 type LeuRangeProps = {
@@ -440,6 +447,20 @@ 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
+   */
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
+
   /**
    *
    * ---
@@ -453,17 +474,18 @@ export type CustomElements = {
   "leu-button": DefineComponent<LeuButtonProps>;
 
   /**
-   *
+   * A wrapper element for charts.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **input** - When the value of the group changes by clicking a button
-   *
    * ### **Slots:**
-   *  - _default_ - Slot for the buttons
+   *  - **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-button-group": DefineComponent<LeuButtonGroupProps>;
+  "leu-chart-wrapper": DefineComponent<LeuChartWrapperProps>;
 
   /**
    *
@@ -476,6 +498,9 @@ export type CustomElements = {
    *
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the checkboxes inside the default slot.
    */
   "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
 
@@ -613,6 +638,18 @@ export type CustomElements = {
    */
   "leu-pagination": DefineComponent<LeuPaginationProps>;
 
+  /**
+   * * A placeholder to display when no content is available.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **title** - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
+   * - **description** - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
+   * - **cta** - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
+   */
+  "leu-placeholder": DefineComponent<LeuPlaceholderProps>;
+
   /**
    *
    * ---
@@ -628,9 +665,12 @@ export type CustomElements = {
   "leu-radio": DefineComponent<LeuRadioProps>;
 
   /**
-   *
+   * Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place the radio buttons inside the default slot.
    */
   "leu-radio-group": DefineComponent<LeuRadioGroupProps>;