@public-ui/components 2.0.0-rc.1 → 2.0.0-rc.11

package/vscode-custom-data.json

@@ -224,7 +224,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         }
       ]
     },
@@ -252,6 +278,10 @@
         "value": "**Buttons** dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen."
       },
       "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines the elements access key."
+        },
         {
           "name": "_aria-controls",
           "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
@@ -400,6 +430,10 @@
         "value": "Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.\n\nEinen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property `_disabled`. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.\n\nStatt, wie bei einem Link, `_href` zu verwenden, wird bei einem ButtonLink das Property über den `Click-Callback` gesteuert. Hierzu wird das `_on`-Property verwendet.\n\nBei einem Link gibt es das Property `target`, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.\n\nDa der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `secondary` usw.) angeboten wird, stehen die Properties `_customClass` und `_variant` nicht zur Verfügung."
       },
       "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines the elements access key."
+        },
         {
           "name": "_aria-controls",
           "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
@@ -563,6 +597,33 @@
         {
           "name": "_secondary-headline",
           "description": "Defines the text of the secondary headline."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            },
+            {
+              "name": "strong"
+            }
+          ]
         }
       ]
     },
@@ -584,6 +645,33 @@
         {
           "name": "_secondary-headline",
           "description": "Setzt den Text einer weiteren Überschrift, einen Level kleiner, unter der Ersten."
+        },
+        {
+          "name": "_variant",
+          "description": "Defines which variant should be used for presentation.",
+          "values": [
+            {
+              "name": "h1"
+            },
+            {
+              "name": "h2"
+            },
+            {
+              "name": "h3"
+            },
+            {
+              "name": "h4"
+            },
+            {
+              "name": "h5"
+            },
+            {
+              "name": "h6"
+            },
+            {
+              "name": "strong"
+            }
+          ]
         }
       ]
     },
@@ -824,7 +912,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_suggestions",
@@ -943,7 +1057,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_step",
@@ -1099,7 +1239,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_suggestions",
@@ -1202,7 +1368,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_tab-index",
@@ -1321,7 +1513,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_step",
@@ -1452,7 +1670,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_tab-index",
@@ -1785,7 +2029,33 @@
         },
         {
           "name": "_smart-button",
-          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only)."
+          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
+          "values": [
+            {
+              "name": "reset"
+            },
+            {
+              "name": "submit"
+            },
+            {
+              "name": "secondary"
+            },
+            {
+              "name": "normal"
+            },
+            {
+              "name": "tertiary"
+            },
+            {
+              "name": "danger"
+            },
+            {
+              "name": "ghost"
+            },
+            {
+              "name": "custom"
+            }
+          ]
         },
         {
           "name": "_suggestions",
@@ -1870,32 +2140,19 @@
       },
       "attributes": [
         {
-          "name": "_download",
-          "description": "Tells the browser that the link contains a file. Optionally sets the filename."
-        },
-        {
-          "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": "_href",
-          "description": "Sets the target URI of the link or citation source."
-        },
-        {
-          "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": "_access-key",
+          "description": "Defines the elements access key."
         },
         {
-          "name": "_listen-aria-current",
-          "description": "Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.",
+          "name": "_aria-current-value",
+          "description": "Defines the value for the aria-current attribute.",
           "values": [
             {
               "name": "date"
             },
+            {
+              "name": "false"
+            },
             {
               "name": "location"
             },
@@ -1907,9 +2164,32 @@
             },
             {
               "name": "time"
+            },
+            {
+              "name": "true"
             }
           ]
         },
+        {
+          "name": "_download",
+          "description": "Tells the browser that the link contains a file. Optionally sets the filename."
+        },
+        {
+          "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": "_href",
+          "description": "Sets the target URI of the link or citation source."
+        },
+        {
+          "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": "_role",
           "description": "Defines the role of the components primary element.",
@@ -1964,6 +2244,37 @@
         "value": "Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.\nWeitere Informationen zum Aussehen finden Sie auf der <kol-link _href=\"/docs/components/button\" _label=\"/docs/components/button\" _label=\"Seite des Buttons\"></kol-link>."
       },
       "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines the elements access key."
+        },
+        {
+          "name": "_aria-current-value",
+          "description": "Defines the value for the aria-current attribute.",
+          "values": [
+            {
+              "name": "date"
+            },
+            {
+              "name": "false"
+            },
+            {
+              "name": "location"
+            },
+            {
+              "name": "page"
+            },
+            {
+              "name": "step"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "true"
+            }
+          ]
+        },
         {
           "name": "_custom-class",
           "description": "Defines the custom class attribute if _variant=\"custom\" is set."
@@ -1988,27 +2299,6 @@
           "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": "_listen-aria-current",
-          "description": "Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.",
-          "values": [
-            {
-              "name": "date"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "page"
-            },
-            {
-              "name": "step"
-            },
-            {
-              "name": "time"
-            }
-          ]
-        },
         {
           "name": "_role",
           "description": "Defines the role of the components primary element.",
@@ -2194,31 +2484,14 @@
         "value": "Eine **Navigationsleiste** ist eine Gruppe von verwandten Links oder Navigationselementen, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln.\n\n**KoliBri** stellt eine umfangreich konfigurierbare, vertikale oder horizontale **Navigationsleiste** zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann.\nÜbergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am rechten Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich das Plus-Icon automatisch zu einem **Minus-Icon**, mit dem der Menüpunkt wieder geschlossen werden kann.\n\nAktive Menüpunkte werden mit einer farbigen Markierung dargestellt.\n\nÜber eine optionale Schaltfläche unterhalb der Navigation kann die Breite der **Nav**-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur\nnoch die Icons ausgegeben."
       },
       "attributes": [
-        {
-          "name": "_aria-current-value",
-          "description": "Defines the value of aria-current to be used with the current context within the navigation.",
-          "values": [
-            {
-              "name": "date"
-            },
-            {
-              "name": "location"
-            },
-            {
-              "name": "page"
-            },
-            {
-              "name": "step"
-            },
-            {
-              "name": "time"
-            }
-          ]
-        },
         {
           "name": "_collapsible",
           "description": "Defines if navigation nodes can be collapsed or not. Enabled by default."
         },
+        {
+          "name": "_has-compact-button",
+          "description": "Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll."
+        },
         {
           "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."
@@ -2305,38 +2578,11 @@
               "name": "top"
             }
           ]
-        },
-        {
-          "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",
+      "name": "kol-popover-wc",
       "description": {
         "kind": "markdown",
         "value": "> <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie **Popover**-Komponente stellt eine Möglichkeit dar zusätzliche Inhalte in ein temporäres Element zu setzen, das, ähnlich wie <kol-link _href=\"\" _label=\"Tooltip\"></kol-link>, um sein Triggerelement angeordnet ist.\nDas Triggerelement ist immer das im HTML vorangehende Element (previousSibling)."
@@ -2565,6 +2811,10 @@
         "value": "<kol-alert _type=\"warning\">Die **Span**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung direkt verwendet zu werden. Denn der Span ist nur dann wirklich barrierefrei, wenn es in Kombination mit dem Tooltip verwendet wird.</kol-alert>\n\nDie **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die Text-Icon-Kombination und das Expert-Slot-Konzept einheitlich umzusetzen."
       },
       "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines the elements access key."
+        },
         {
           "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."
@@ -2763,6 +3013,10 @@
         "value": "Die **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.\n</kol-indented-text>"
       },
       "attributes": [
+        {
+          "name": "_allow-multi-sort",
+          "description": "Defines whether to allow multi sort."
+        },
         {
           "name": "_data",
           "description": "Defines the primary table data."
@@ -2953,60 +3207,11 @@
         }
       ]
     },
-    {
-      "name": "kol-toast",
-      "description": {
-        "kind": "markdown",
-        "value": "Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster\nangezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt."
-      },
-      "attributes": [
-        {
-          "name": "_label",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
-        },
-        {
-          "name": "_status",
-          "description": "Defines the current toast status.",
-          "values": [
-            {
-              "name": "adding"
-            },
-            {
-              "name": "removing"
-            },
-            {
-              "name": "settled"
-            }
-          ]
-        },
-        {
-          "name": "_type",
-          "description": "Defines either the type of the component or of the components interactive element.",
-          "values": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "error"
-            },
-            {
-              "name": "info"
-            },
-            {
-              "name": "success"
-            },
-            {
-              "name": "warning"
-            }
-          ]
-        }
-      ]
-    },
     {
       "name": "kol-toast-container",
       "description": {
         "kind": "markdown",
-        "value": "Siehe [Toast](/docs/components/toast)."
+        "value": "Mit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster\nangezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt."
       },
       "attributes": []
     },
@@ -3017,6 +3222,10 @@
         "value": "<kol-alert _type=\"warning\">Die **Tooltip**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden. Denn der Tooltip ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird.</kol-alert>\n\nDie **Tooltip**-Komponente implementiert das Gegenstück zum `Aria-Label`. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.\n\nEin geöffneter Tooltip lässt sich mit der `Escape`-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.\n\n**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht `display: inline` haben."
       },
       "attributes": [
+        {
+          "name": "_access-key",
+          "description": "Defines the elements access key."
+        },
         {
           "name": "_align",
           "description": "Defines the alignment of the tooltip, popover or tabs in relation to the element.",

package/dist/cjs/align-5cb0bd50.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const alignment=require("./alignment-160829a3.js"),validateAlign=(i,a)=>{alignment.validateAlignment(i,"_align",a)};exports.validateAlign=validateAlign;

package/dist/cjs/align-5cb0bd50.js.map

@@ -1 +0,0 @@
-{"file":"align-5cb0bd50.js","mappings":";;;;;;;MAiBa,aAAa,GAAG,CAAC,SAAoC,EAAE,KAAqB;EACxFA,2BAAiB,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC/C;;;;","names":["validateAlignment"],"sources":["src/types/props/align.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { validateAlignment } from '../../utils/validators/alignment';\n\n/* types */\ntype HorizontalAlign = 'left' | 'right';\ntype VerticalAlign = 'top' | 'bottom';\nexport type AlignPropType = HorizontalAlign | VerticalAlign;\n\n/**\n * Defines where to show the element preferably: top, right, bottom or left.\n */\nexport type PropAlign = {\n\talign: AlignPropType;\n};\n\n/* validator */\nexport const validateAlign = (component: Generic.Element.Component, value?: AlignPropType): void => {\n\tvalidateAlignment(component, '_align', value);\n};\n"],"version":3}

package/dist/cjs/alignment-160829a3.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const prop_validators=require("./prop.validators-d9e8f5a9.js"),AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES=new Set(['"left", "right"']),AVAILABLE_VERTICAL_ALIGNMENT_VALUES=new Set(['"bottom", "top"']),AVAILABLE_ALIGNMENT_VALUES=new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES,...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]),validateAlignment=(A,t,L)=>{prop_validators.watchValidator(A,t,(A=>"bottom"===A||"left"===A||"right"===A||"top"===A),AVAILABLE_ALIGNMENT_VALUES,L,{defaultValue:"top"})};exports.validateAlignment=validateAlignment;