@public-ui/components 4.1.2-rc.1 → 4.1.2-rc.3

package/vscode-custom-data.json

@@ -5,7 +5,7 @@
       "name": "kol-abbr",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.\nThe tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered."
       },
       "attributes": [
         {
@@ -18,7 +18,7 @@
       "name": "kol-accordion",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information."
       },
       "attributes": [
         {
@@ -43,7 +43,7 @@
       "name": "kol-alert",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert."
       },
       "attributes": [
         {
@@ -101,7 +101,7 @@
       "name": "kol-avatar",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Avatar** component displays either a small image of the user or their initials if no image is available."
       },
       "attributes": [
         {
@@ -122,7 +122,7 @@
       "name": "kol-badge",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style."
       },
       "attributes": [
         {
@@ -158,7 +158,7 @@
       "name": "kol-breadcrumb",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure."
       },
       "attributes": [
         {
@@ -175,7 +175,7 @@
       "name": "kol-button",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions."
       },
       "attributes": [
         {
@@ -312,7 +312,7 @@
       "name": "kol-button-link",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available."
       },
       "attributes": [
         {
@@ -422,28 +422,7 @@
       "name": "kol-card",
       "description": {
         "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_has-closer",
-          "description": "Defines whether the element can be closed."
-        },
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
-        },
-        {
-          "name": "_level",
-          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
-        }
-      ]
-    },
-    {
-      "name": "kol-card-wc",
-      "description": {
-        "kind": "markdown",
-        "value": ""
+        "value": "The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n\nThe **Card** component consists of a **_title area_** and a **_content area_**.\n\nThe **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font."
       },
       "attributes": [
         {
@@ -460,19 +439,6 @@
         }
       ]
     },
-    {
-      "name": "kol-click-button",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_label",
-          "description": "Sets the label of the click button component."
-        }
-      ]
-    },
     {
       "name": "kol-combobox",
       "description": {
@@ -579,7 +545,7 @@
       "name": "kol-details",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content."
       },
       "attributes": [
         {
@@ -672,7 +638,7 @@
       "name": "kol-form",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events."
       },
       "attributes": [
         {
@@ -685,7 +651,7 @@
       "name": "kol-heading",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Heading** component can be used wherever a heading needs to be displayed. By using the different sizes, content can be clearly structured and pages can be presented effectively and with variety. It separates styling from semantics and enables flexibility."
       },
       "attributes": [
         {
@@ -706,7 +672,7 @@
       "name": "kol-icon",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Icon** component allows icons from included icon fonts to be displayed at any position."
       },
       "attributes": [
         {
@@ -723,7 +689,7 @@
       "name": "kol-image",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text."
       },
       "attributes": [
         {
@@ -760,7 +726,7 @@
       "name": "kol-input-checkbox",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box."
       },
       "attributes": [
         {
@@ -885,7 +851,7 @@
       "name": "kol-input-color",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values."
       },
       "attributes": [
         {
@@ -994,7 +960,7 @@
       "name": "kol-input-date",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values."
       },
       "attributes": [
         {
@@ -1144,7 +1110,7 @@
       "name": "kol-input-email",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions."
       },
       "attributes": [
         {
@@ -1293,7 +1259,7 @@
       "name": "kol-input-file",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form."
       },
       "attributes": [
         {
@@ -1402,7 +1368,7 @@
       "name": "kol-input-number",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range."
       },
       "attributes": [
         {
@@ -1535,7 +1501,7 @@
       "name": "kol-input-password",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Password** input type creates an input field for passwords. The input is masked with dot symbols."
       },
       "attributes": [
         {
@@ -1688,7 +1654,7 @@
       "name": "kol-input-radio",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle."
       },
       "attributes": [
         {
@@ -1782,7 +1748,7 @@
       "name": "kol-input-range",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size."
       },
       "attributes": [
         {
@@ -1888,7 +1854,7 @@
       "name": "kol-input-text",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers."
       },
       "attributes": [
         {
@@ -2194,7 +2160,7 @@
       "name": "kol-link-button",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button."
       },
       "attributes": [
         {
@@ -2335,7 +2301,7 @@
       "name": "kol-modal",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility."
       },
       "attributes": [
         {
@@ -2364,7 +2330,7 @@
       "name": "kol-nav",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\nIt provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width."
       },
       "attributes": [
         {
@@ -2456,209 +2422,11 @@
         }
       ]
     },
-    {
-      "name": "kol-pagination-wc",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_boundary-count",
-          "description": "Defines the amount of pages to show next to the outer arrow buttons."
-        },
-        {
-          "name": "_custom-class",
-          "description": "Defines the custom class attribute if _variant=\"custom\" is set."
-        },
-        {
-          "name": "_has-buttons",
-          "description": "Defines which navigation buttons to render (first, last, next, previous buttons)."
-        },
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
-        },
-        {
-          "name": "_max",
-          "description": "Defines the maximum value of the element."
-        },
-        {
-          "name": "_page",
-          "description": "Defines the current page."
-        },
-        {
-          "name": "_page-size",
-          "description": "Defines the amount of entries to show per page."
-        },
-        {
-          "name": "_page-size-options",
-          "description": "Defines the options for the page-size-select."
-        },
-        {
-          "name": "_sibling-count",
-          "description": "Defines the amount of pages to show next to the current page."
-        },
-        {
-          "name": "_tooltip-align",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "values": [
-            {
-              "name": "bottom"
-            },
-            {
-              "name": "left"
-            },
-            {
-              "name": "right"
-            },
-            {
-              "name": "top"
-            }
-          ]
-        }
-      ]
-    },
     {
       "name": "kol-popover-button",
       "description": {
         "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_access-key",
-          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
-        },
-        {
-          "name": "_aria-description",
-          "description": "Defines the value for the aria-description attribute."
-        },
-        {
-          "name": "_custom-class",
-          "description": "Defines the custom class attribute if _variant=\"custom\" is set."
-        },
-        {
-          "name": "_disabled",
-          "description": "Makes the element not focusable and ignore all events."
-        },
-        {
-          "name": "_hide-label",
-          "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
-        },
-        {
-          "name": "_icons",
-          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
-        },
-        {
-          "name": "_inline",
-          "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
-        },
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
-        },
-        {
-          "name": "_name",
-          "description": "Defines the technical name of an input field."
-        },
-        {
-          "name": "_popover-align",
-          "description": "Defines where to show the Popover preferably: top, right, bottom or left.",
-          "values": [
-            {
-              "name": "bottom"
-            },
-            {
-              "name": "left"
-            },
-            {
-              "name": "right"
-            },
-            {
-              "name": "top"
-            }
-          ]
-        },
-        {
-          "name": "_short-key",
-          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
-        },
-        {
-          "name": "_tab-index",
-          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
-        },
-        {
-          "name": "_tooltip-align",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "values": [
-            {
-              "name": "bottom"
-            },
-            {
-              "name": "left"
-            },
-            {
-              "name": "right"
-            },
-            {
-              "name": "top"
-            }
-          ]
-        },
-        {
-          "name": "_type",
-          "description": "Defines either the type of the component or of the components interactive element.",
-          "values": [
-            {
-              "name": "button"
-            },
-            {
-              "name": "reset"
-            },
-            {
-              "name": "submit"
-            }
-          ]
-        },
-        {
-          "name": "_value",
-          "description": "Defines the value of the element."
-        },
-        {
-          "name": "_variant",
-          "description": "Defines which variant should be used for presentation.",
-          "values": [
-            {
-              "name": "custom"
-            },
-            {
-              "name": "danger"
-            },
-            {
-              "name": "ghost"
-            },
-            {
-              "name": "normal"
-            },
-            {
-              "name": "primary"
-            },
-            {
-              "name": "secondary"
-            },
-            {
-              "name": "tertiary"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "name": "kol-popover-button-wc",
-      "description": {
-        "kind": "markdown",
-        "value": ""
+        "value": "A button that toggles the visibility of a popover overlay containing arbitrary content.\nThe popover uses the native HTML Popover API for lightweight, non-modal overlays."
       },
       "attributes": [
         {
@@ -2793,7 +2561,7 @@
       "name": "kol-progress",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants."
       },
       "attributes": [
         {
@@ -2830,7 +2598,7 @@
       "name": "kol-quote",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote."
       },
       "attributes": [
         {
@@ -2965,117 +2733,11 @@
         }
       ]
     },
-    {
-      "name": "kol-select-wc",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_access-key",
-          "description": "Defines the key combination that can be used to trigger or focus the component’s interactive element."
-        },
-        {
-          "name": "_disabled",
-          "description": "Makes the element not focusable and ignore all events."
-        },
-        {
-          "name": "_hide-label",
-          "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
-        },
-        {
-          "name": "_hide-msg",
-          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
-        },
-        {
-          "name": "_hint",
-          "description": "Defines the hint text."
-        },
-        {
-          "name": "_icons",
-          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
-        },
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
-        },
-        {
-          "name": "_msg",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "values": [
-            {
-              "name": "_variant"
-            },
-            {
-              "name": "_hasCloser"
-            },
-            {
-              "name": "_label"
-            }
-          ]
-        },
-        {
-          "name": "_multiple",
-          "description": "Makes the input accept multiple inputs."
-        },
-        {
-          "name": "_name",
-          "description": "Defines the technical name of an input field."
-        },
-        {
-          "name": "_options",
-          "description": "Options the user can choose from, also supporting Optgroup."
-        },
-        {
-          "name": "_required",
-          "description": "Makes the input element required."
-        },
-        {
-          "name": "_rows",
-          "description": "Defines how many rows of options should be visible at the same time."
-        },
-        {
-          "name": "_short-key",
-          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
-        },
-        {
-          "name": "_tab-index",
-          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
-        },
-        {
-          "name": "_tooltip-align",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "values": [
-            {
-              "name": "bottom"
-            },
-            {
-              "name": "left"
-            },
-            {
-              "name": "right"
-            },
-            {
-              "name": "top"
-            }
-          ]
-        },
-        {
-          "name": "_touched",
-          "description": "Shows if the input was touched by a user."
-        },
-        {
-          "name": "_value",
-          "description": "Defines the value of the input."
-        }
-      ]
-    },
     {
       "name": "kol-single-select",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected."
       },
       "attributes": [
         {
@@ -3194,7 +2856,7 @@
       "name": "kol-skip-nav",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key."
       },
       "attributes": [
         {
@@ -3211,7 +2873,7 @@
       "name": "kol-spin",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation."
       },
       "attributes": [
         {
@@ -3243,7 +2905,7 @@
       "name": "kol-split-button",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions."
       },
       "attributes": [
         {
@@ -3376,7 +3038,7 @@
       "name": "kol-table-stateful",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination."
       },
       "attributes": [
         {
@@ -3465,7 +3127,7 @@
       "name": "kol-tabs",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users."
       },
       "attributes": [
         {
@@ -3520,7 +3182,7 @@
       "name": "kol-textarea",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks."
       },
       "attributes": [
         {
@@ -3658,14 +3320,6 @@
         }
       ]
     },
-    {
-      "name": "kol-toast-container",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": []
-    },
     {
       "name": "kol-toolbar",
       "description": {
@@ -3729,31 +3383,6 @@
         }
       ]
     },
-    {
-      "name": "kol-tree-item-wc",
-      "description": {
-        "kind": "markdown",
-        "value": ""
-      },
-      "attributes": [
-        {
-          "name": "_active",
-          "description": "If set (to true) the tree item is the active one."
-        },
-        {
-          "name": "_href",
-          "description": "Defines the target URI of the link."
-        },
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
-        },
-        {
-          "name": "_open",
-          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
-        }
-      ]
-    },
     {
       "name": "kol-version",
       "description": {