@public-ui/components 1.5.0-rc.0 → 1.5.0-rc.2

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-rc.0",
+  "version": "1.5.0-rc.2",
   "tags": [
     {
       "name": "kol-abbr",
@@ -35,6 +35,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -83,6 +87,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -144,6 +152,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -192,6 +204,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -290,6 +306,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -338,6 +358,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -381,7 +405,7 @@
         },
         {
           "name": "_smart-button",
-          "type": "string | undefined | { _label: string; } & { _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrent | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _disabled?: boolean | undefined; _icon?: Stringified<KoliBriIconProp> | undefined; _iconAlign?: Alignment | undefined; _iconOnly?: boolean | undefined; _role?: AlternativButtonLinkRole | undefined; _tabIndex?: number | undefined; _tooltipAlign?: Alignment | undefined; _accessKey?: string | undefined; _id?: string | undefined; _on?: KoliBriButtonCallbacks<unknown> | undefined; _type?: KoliBriButtonType | undefined; _value?: unknown; _customClass?: string | undefined; _variant?: KoliBriButtonVariant | undefined; }",
+          "type": "string | undefined | { _label: string; } & { _ariaControls?: string | undefined; _ariaCurrent?: AriaCurrent | undefined; _ariaExpanded?: boolean | undefined; _ariaLabel?: string | undefined; _ariaSelected?: boolean | undefined; _disabled?: boolean | undefined; _icon?: Stringified<KoliBriIconProp> | undefined; _iconAlign?: Alignment | undefined; _iconOnly?: boolean | undefined; _role?: AlternativButtonLinkRole | undefined; _tabIndex?: number | undefined; _tooltipAlign?: Alignment | undefined; _accessKey?: string | undefined; _id?: string | undefined; _on?: KoliBriButtonCallbacks<unknown> | undefined; _type?: KoliBriButtonType | undefined; _value?: unknown; _variant?: KoliBriButtonVariant | undefined; _customClass?: string | undefined; }",
           "description": "Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).",
           "required": false
         }
@@ -402,6 +426,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -450,6 +478,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -494,6 +526,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -542,6 +578,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -594,7 +634,6 @@
           "name": "_aria-label",
           "type": "string | undefined",
           "description": "Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)",
-          "defaultValue": "''",
           "required": false
         },
         {
@@ -626,7 +665,6 @@
           "name": "_icon-align",
           "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
           "description": "Gibt an, ob das Icon links oder rechts dargestellt werden soll.",
-          "defaultValue": "'left'",
           "required": false
         },
         {
@@ -698,6 +736,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -746,6 +788,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -777,6 +823,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -825,6 +875,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -878,7 +932,6 @@
           "name": "_aria-label",
           "type": "string | undefined",
           "description": "Gibt einen beschreibenden Text für den Screenreader an. Damit die\nSprachsteuerung von interaktiven Elementen funktioniert, muss der\nAria-Label-Text mit dem Label-Text des Buttons beginnen.\n\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label",
-          "defaultValue": "''",
           "required": false
         },
         {
@@ -962,6 +1015,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1010,6 +1067,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1081,6 +1142,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1129,6 +1194,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1179,6 +1248,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1227,6 +1300,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1261,7 +1338,7 @@
       "description": "Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.",
       "attributes": [
         {
-          "name": "_label",
+          "name": "_headline",
           "type": "string",
           "description": "Gibt den Text der Überschrift an.",
           "required": true
@@ -1273,10 +1350,9 @@
           "required": false
         },
         {
-          "name": "_overline",
+          "name": "_secondary-headline",
           "type": "string | undefined",
-          "description": "Gibt den Text der zusätzlichen Beschriftung an.",
-          "defaultValue": "''",
+          "description": "Gibt den Text der zusätzlichen Überschrift an.",
           "required": false
         }
       ],
@@ -1296,6 +1372,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1344,6 +1424,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1360,7 +1444,7 @@
       "description": "Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität.",
       "attributes": [
         {
-          "name": "_label",
+          "name": "_headline",
           "type": "string",
           "description": "Gibt den Text der Überschrift an.",
           "required": true
@@ -1373,10 +1457,9 @@
           "required": false
         },
         {
-          "name": "_overline",
+          "name": "_secondary-headline",
           "type": "string | undefined",
-          "description": "Gibt den Text der zusätzlichen Beschriftung an.",
-          "defaultValue": "''",
+          "description": "Gibt den Text der zusätzlichen Überschrift an.",
           "required": false
         }
       ],
@@ -1479,6 +1562,48 @@
       "cssProperties": [],
       "cssParts": []
     },
+    {
+      "name": "kol-image",
+      "description": "Die **Image**-Komponente dient dazu, Bilder darzustellen.",
+      "attributes": [
+        {
+          "name": "_alt",
+          "type": "string",
+          "description": "Gibt den alternativen Text an.",
+          "required": true
+        },
+        {
+          "name": "_loading",
+          "type": "\"eager\" | \"lazy\" | undefined",
+          "description": "Gibt den Lademodus an.",
+          "defaultValue": "'lazy'",
+          "required": false
+        },
+        {
+          "name": "_sizes",
+          "type": "string | undefined",
+          "description": "...",
+          "required": false
+        },
+        {
+          "name": "_src",
+          "type": "string",
+          "description": "Gibt die Quell-URL an.",
+          "required": true
+        },
+        {
+          "name": "_srcset",
+          "type": "string | undefined",
+          "description": "Gibt eine Liste von Quell-URLs mit Breiten der Bilder an.",
+          "required": false
+        }
+      ],
+      "events": [],
+      "methods": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssParts": []
+    },
     {
       "name": "kol-indented-text",
       "description": "Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate.\n\nIn der Komponente kann beliebiger HTML-Code verwendet werden.",
@@ -1499,6 +1624,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1547,6 +1676,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1695,6 +1828,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1743,6 +1880,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -1862,6 +2003,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -1910,6 +2055,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -2066,6 +2215,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -2114,6 +2267,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -2275,6 +2432,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -2323,6 +2484,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -2448,6 +2613,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -2496,6 +2665,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -2658,6 +2831,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -2706,6 +2883,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -2855,6 +3036,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -2903,6 +3088,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -3023,6 +3212,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -3071,6 +3264,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -3307,6 +3504,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -3355,6 +3556,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -3517,6 +3722,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -3565,6 +3774,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -3616,6 +3829,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -3664,6 +3881,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -3701,7 +3922,6 @@
           "name": "_aria-label",
           "type": "string | undefined",
           "description": "Gibt einen beschreibenden Text des Links an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)",
-          "defaultValue": "''",
           "required": false
         },
         {
@@ -3733,7 +3953,6 @@
           "name": "_icon-align",
           "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
           "description": "Gibt an, ob das Icon entweder links oder rechts dargestellt werden soll.",
-          "defaultValue": "'left'",
           "required": false
         },
         {
@@ -3818,6 +4037,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -3866,6 +4089,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4018,6 +4245,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4066,6 +4297,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4141,6 +4376,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4189,6 +4428,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4233,6 +4476,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4281,6 +4528,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4333,6 +4584,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4381,6 +4636,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4467,6 +4726,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4515,6 +4778,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4618,6 +4885,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4666,6 +4937,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4723,6 +4998,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4771,6 +5050,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -4909,6 +5192,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -4957,6 +5244,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5006,6 +5297,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5054,6 +5349,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5110,6 +5409,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5158,6 +5461,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5197,6 +5504,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5245,6 +5556,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5330,6 +5645,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5378,6 +5697,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5436,6 +5759,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5484,6 +5811,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5635,6 +5966,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5683,6 +6018,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5764,6 +6103,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5812,6 +6155,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5863,6 +6210,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5911,6 +6262,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."
@@ -5949,6 +6304,10 @@
           "name": "--kolibri-border-width",
           "description": "Default width of the border."
         },
+        {
+          "name": "--kolibri-color-black",
+          "description": "Default color of black (dark)."
+        },
         {
           "name": "--kolibri-color-danger",
           "description": "Default color of the danger."
@@ -5997,6 +6356,10 @@
           "name": "--kolibri-color-warning",
           "description": "Default color of the warning."
         },
+        {
+          "name": "--kolibri-color-white",
+          "description": "Default color of white (light)."
+        },
         {
           "name": "--kolibri-font-family",
           "description": "Default font family."