@public-ui/components 2.2.4 → 2.2.5-rc.0

package/doc/link-button.md

@@ -32,7 +32,7 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 
 | Property             | Attribute             | Description                                                                                                                                                  | Type                                                                                                 | Default     |
 | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`         | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                                | `undefined` |
+| `_accessKey`         | `_access-key`         | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                                | `undefined` |
 | `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined`               | `undefined` |
 | `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                        | `string` \| `undefined`                                                                                | `undefined` |
 | `_customClass`       | `_custom-class`       | Defines the custom class attribute if _variant="custom" is set.                                                                                              | `string` \| `undefined`                                                                                | `undefined` |

package/doc/link.md

@@ -77,7 +77,7 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 
 | Property             | Attribute             | Description                                                                                                                                                  | Type                                                                                   | Default     |
 | -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ----------- |
-| `_accessKey`         | `_access-key`         | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                  | `undefined` |
+| `_accessKey`         | `_access-key`         | Defines which key combination can be used to trigger or focus the interactive element of the component.                                                      | `string` \| `undefined`                                                                  | `undefined` |
 | `_ariaCurrentValue`  | `_aria-current-value` | Defines the value for the aria-current attribute.                                                                                                            | `"date"` \| `"false"` \| `"location"` \| `"page"` \| `"step"` \| `"time"` \| `"true"` \| `undefined` | `undefined` |
 | `_ariaDescription`   | `_aria-description`   | Defines the value for the aria-description attribute.                                                                                                        | `string` \| `undefined`                                                                  | `undefined` |
 | `_disabled`          | `_disabled`           | Makes the element not focusable and ignore all events.                                                                                                       | `boolean` \| `undefined`                                                                 | `false`     |
@@ -88,7 +88,7 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 | `_label`             | `_label`              | 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. | `string` \| `undefined`                                                                  | `undefined` |
 | `_on`                | --                    | Defines the callback functions for links.                                                                                                                    | `undefined` \| `{ onClick?: EventValueOrEventCallback<Event, string>` \| `undefined; }`    | `undefined` |
 | `_role`              | `_role`               | Defines the role of the components primary element.                                                                                                          | `"button"` \| `"link"` \| `"tab"` \| `"treeitem"` \| `undefined`                               | `undefined` |
-| `_shortKey`          | `_short-key`          | Defines the elements access key.                                                                                                                             | `string` \| `undefined`                                                                  | `undefined` |
+| `_shortKey`          | `_short-key`          | Adds a visual short key hint to the component.                                                                                                               | `string` \| `undefined`                                                                  | `undefined` |
 | `_tabIndex`          | `_tab-index`          | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number` \| `undefined`                                                                  | `undefined` |
 | `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string` \| `undefined`                                                                  | `undefined` |
 | `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                  | `'right'`   |

package/doc/table-stateful.md

@@ -79,12 +79,16 @@ Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
 ### Code
 
 ```html
-<kol-table-stateful _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
+<kol-table-stateful
+	_label="Tabellenbeschreibung"
+	_headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}'
+	_pagination='[{"page":2}]'
+></kol-table-stateful>
 ```
 
 ### Beispiel
 
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table-stateful>
 
 ### Footer
 
@@ -92,7 +96,7 @@ Durch die Verwendung des **`_dataFoot_`**-Attribut können zusammenfassende Info
 
 ### Beispiel
 
-<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table>
+<kol-table-stateful _label="Nur Vertikal Header, Daten Vertikal, Pagination, DataFoot" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _dataFoot='[{"montag":"Ruhetag"}]' _pagination='{"page":2}'></kol-table-stateful>
 
 ## Verwendung
 

package/doc/tabs.md

@@ -95,7 +95,7 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 
 | Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                                                                                                                     | Default     |
 | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_align`              | `_align`    | Defines the position of the tab captions.                                                                          | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
+| `_align`              | `_align`    | Defines the visual orientation of the component.                                                                   | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                                                                                                                                                                    | `'top'`     |
 | `_behavior`           | `_behavior` | Defines which behavior is active.                                                                                  | `"select-automatic"` \| `"select-manual"` \| `undefined`                                                                                                                                                                                                     | `undefined` |
 | `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                 | `undefined` |
 | `_on`                 | --          | Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.                                | `undefined` \| `{ onCreate?: EventCallback<Event>` \| `{ label: string; callback: EventCallback<Event>; }` \| `undefined; } & { onSelect?: EventValueOrEventCallback<MouseEvent` \| `KeyboardEvent` \| `CustomEvent<any>` \| `PointerEvent, number>` \| `undefined; }` | `undefined` |

package/doc/toolbar.md

@@ -50,10 +50,10 @@ Die **Toolbar**-Komponente erkennt hierbei selbständig durch das **`_href`**-At
 
 ## Properties
 
-| Property              | Attribute | Description                                                                       | Type                    | Default     |
-| --------------------- | --------- | --------------------------------------------------------------------------------- | ----------------------- | ----------- |
-| `_items` _(required)_ | --        | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button). | `ToolbarItemPropType[]` | `undefined` |
-| `_label` _(required)_ | `_label`  | Defines the semantic aria-label of the component.                                 | `string`                | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                    | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |
+| `_items` _(required)_ | --        | Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).                                  | `ToolbarItemPropType[]` | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                | `undefined` |
 
 
 ----------------------------------------------

package/doc/tree-item.md

@@ -7,12 +7,12 @@ Weitere Informationen zum Tree finden Sie auf der <kol-link _href="/docs/compone
 
 ## Properties
 
-| Property              | Attribute | Description                                                                      | Type                   | Default     |
-| --------------------- | --------- | -------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `_active`             | `_active` | If set (to true) the tree item is the active one.                                | `boolean` \| `undefined` | `undefined` |
-| `_href` _(required)_  | `_href`   | This property is used for a link from a reference to the target URL.             | `string`               | `undefined` |
-| `_label` _(required)_ | `_label`  | Defines the label of the link.                                                   | `string`               | `undefined` |
-| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false). | `boolean` \| `undefined` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type                   | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `_active`             | `_active` | If set (to true) the tree item is the active one.                                                                  | `boolean` \| `undefined` | `undefined` |
+| `_href` _(required)_  | `_href`   | Defines the target URI of the link.                                                                                | `string`               | `undefined` |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`               | `undefined` |
+| `_open`               | `_open`   | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean` \| `undefined` | `undefined` |
 
 
 ## Methods

package/doc/tree.md

@@ -74,9 +74,9 @@ Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tas
 
 ## Properties
 
-| Property              | Attribute | Description                    | Type     | Default     |
-| --------------------- | --------- | ------------------------------ | -------- | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the label of the tree. | `string` | `undefined` |
+| Property              | Attribute | Description                                                                                                        | Type     | Default     |
+| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
+| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
 
 
 ----------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.2.4",
+  "version": "2.2.5-rc.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -50,6 +50,18 @@
     "webstandard",
     "wcag"
   ],
+  "dependencies": {
+    "@floating-ui/dom": "1.6.13",
+    "adopted-style-sheets": "1.1.7",
+    "clsx": "2.1.1",
+    "color-convert": "2.0.1",
+    "color-rgba": "2.4.0",
+    "markdown-it": "14.1.0",
+    "query-selector-all-shadow-root": "0.0.3",
+    "query-selector-shadow-root": "0.0.3",
+    "rgba-convert": "0.3.0",
+    "wcag-contrast": "3.0.0"
+  },
   "peerDependencies": {
     "adopted-style-sheets": "1.1.7"
   },

package/vscode-custom-data.json

@@ -53,7 +53,7 @@
         },
         {
           "name": "_open",
-          "description": "If set (to true) opens/expands the element, closes if not set (or set to false)."
+          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
         }
       ]
     },
@@ -218,7 +218,7 @@
       "attributes": [
         {
           "name": "_access-key",
-          "description": "Defines the elements access key."
+          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
         },
         {
           "name": "_aria-controls",
@@ -284,7 +284,7 @@
         },
         {
           "name": "_short-key",
-          "description": "Defines the elements short key."
+          "description": "Adds a visual short key hint to the component."
         },
         {
           "name": "_tab-index",
@@ -373,7 +373,7 @@
       "attributes": [
         {
           "name": "_access-key",
-          "description": "Defines the elements access key."
+          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
         },
         {
           "name": "_aria-controls",
@@ -583,7 +583,7 @@
         },
         {
           "name": "_suggestions",
-          "description": "Suggestions the user can choose from."
+          "description": "Suggestions to provide for the input."
         },
         {
           "name": "_tab-index",
@@ -638,7 +638,7 @@
         },
         {
           "name": "_open",
-          "description": "If set (to true) opens/expands the element, closes if not set (or set to false)."
+          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
         }
       ]
     },
@@ -651,7 +651,7 @@
       "attributes": [
         {
           "name": "_align",
-          "description": "Specifies the orientation of the drawer.",
+          "description": "Defines the visual orientation of the component.",
           "values": [
             {
               "name": "bottom"
@@ -673,11 +673,11 @@
         },
         {
           "name": "_modal",
-          "description": "Indicates whether the drawer is a modal."
+          "description": ""
         },
         {
           "name": "_open",
-          "description": "Specifies the default open state of the drawer."
+          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
         }
       ]
     },
@@ -2545,7 +2545,7 @@
       "attributes": [
         {
           "name": "_access-key",
-          "description": "Defines the elements access key."
+          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
         },
         {
           "name": "_aria-current-value",
@@ -2622,7 +2622,7 @@
         },
         {
           "name": "_short-key",
-          "description": "Defines the elements access key."
+          "description": "Adds a visual short key hint to the component."
         },
         {
           "name": "_tab-index",
@@ -2661,7 +2661,7 @@
       "attributes": [
         {
           "name": "_access-key",
-          "description": "Defines the elements access key."
+          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
         },
         {
           "name": "_aria-current-value",
@@ -3672,7 +3672,7 @@
       "attributes": [
         {
           "name": "_align",
-          "description": "Defines the position of the tab captions.",
+          "description": "Defines the visual orientation of the component.",
           "values": [
             {
               "name": "bottom"
@@ -3885,7 +3885,7 @@
       "attributes": [
         {
           "name": "_label",
-          "description": "Defines the semantic aria-label of the component."
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
         }
       ]
     },
@@ -3898,7 +3898,7 @@
       "attributes": [
         {
           "name": "_label",
-          "description": "Defines the label of the tree."
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
         }
       ]
     },
@@ -3915,15 +3915,15 @@
         },
         {
           "name": "_href",
-          "description": "This property is used for a link from a reference to the target URL."
+          "description": "Defines the target URI of the link."
         },
         {
           "name": "_label",
-          "description": "Defines the label of the link."
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
         },
         {
           "name": "_open",
-          "description": "If set (to true) opens/expands the element, closes if not set (or set to false)."
+          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
         }
       ]
     },
@@ -3940,15 +3940,15 @@
         },
         {
           "name": "_href",
-          "description": "This property is used for a link from a reference to the target URL."
+          "description": "Defines the target URI of the link."
         },
         {
           "name": "_label",
-          "description": "Defines the label of the link."
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
         },
         {
           "name": "_open",
-          "description": "If set (to true) opens/expands the element, closes if not set (or set to false)."
+          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
         }
       ]
     },

package/dist/cjs/FormFieldMsg-e6aea1ab.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const clsx=require("./clsx-dd4d6dd1.js"),index=require("./index-3e0c664f.js"),Alert=require("./Alert-ef59ca5f.js");function transformObjectProperties(e){return Object.entries(e).reduce(((e,[r,s])=>{const t=r.startsWith("_")?r.slice(1):r;return Object.assign(Object.assign({},e),{[t]:s})}),{})}const FormFieldMsgFc=({_alert:e,_msg:r,_hideError:s,_id:t})=>{const i=transformObjectProperties(r||{});return index.h(Alert.KolAlertFc,Object.assign({id:`${t}-error`,alert:e,type:"error",class:clsx.clsx({error:!0,"visually-hidden":!0===s})},i),(null==r?void 0:r._description)||void 0)},KolFormFieldMsgFc=FormFieldMsgFc;exports.KolFormFieldMsgFc=KolFormFieldMsgFc;