@public-ui/components 2.0.1 → 2.0.3

package/dist/kolibri/tooltip-align-36b445e5.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{v as o}from"./alignment-3ca6c7b4.js";const t=(t,a)=>{o(t,"_tooltipAlign",a)};export{t as v};

package/dist/kolibri/{validation-503191a4.js → validation-406b3d9a.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as e}from"./prop.validators-f887ad3b.js";const r=[0,1,2,3,4,5,6],t=(t,o)=>{e(t,"_level",(e=>"number"==typeof e&&r.includes(e)),new Set([`Number {${r.join(", ")}`]),o,{defaultValue:1,required:!0})};export{t as w};
+import{w as e}from"./prop.validators-c9100bb0.js";const r=[0,1,2,3,4,5,6],t=(t,o)=>{e(t,"_level",(e=>"number"==typeof e&&r.includes(e)),new Set([`Number {${r.join(", ")}`]),o,{defaultValue:1,required:!0})};export{t as w};

package/dist/kolibri/validation-7eedde02.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{c as o}from"./a11y.tipps-2a54fd3e.js";import{c as t}from"./prop.validators-c9100bb0.js";const s=(s,e,p)=>{t(e,"_links",(t=>"object"==typeof t&&("string"==typeof t._href||"string"==typeof t._label)),p),o(s,e.state._links.length)};export{s as w};

package/dist/types/components/form/component.d.ts

@@ -1,14 +1,18 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Stringified } from '../../types/common';
 import { API, KoliBriFormCallbacks, States } from './types';
+import { ErrorListPropType } from '../../types/props/error-list';
 export declare class KolForm implements API {
     private readonly onSubmit;
     private readonly onReset;
+    private readonly handleLinkClick;
     render(): JSX.Element;
     _on?: KoliBriFormCallbacks;
     _requiredText?: Stringified<boolean>;
+    _errorList?: ErrorListPropType[];
     state: States;
     validateOn(value?: KoliBriFormCallbacks): void;
     validateRequiredText(value?: Stringified<boolean>): void;
+    validateErrorList(value?: ErrorListPropType[]): void;
     componentWillLoad(): void;
 }

package/dist/types/components/form/types.d.ts

@@ -1,6 +1,7 @@
 import type { Generic } from 'adopted-style-sheets';
 import { Events } from '../../enums/events';
 import { EventCallback } from '../../types/callbacks';
+import { PropErrorList } from '../../types/props/error-list';
 export type KoliBriFormCallbacks = {
     [Events.onSubmit]?: EventCallback<Event>;
     [Events.onReset]?: EventCallback<Event>;
@@ -9,7 +10,7 @@ type RequiredProps = NonNullable<unknown>;
 type OptionalProps = {
     on: KoliBriFormCallbacks;
     requiredText: string | boolean;
-};
+} & PropErrorList;
 export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
 type RequiredStates = RequiredProps;
 type OptionalStates = OptionalProps;

package/dist/types/components/link/component.d.ts

@@ -31,7 +31,6 @@ export declare class KolLinkWc implements API {
     _role?: AlternativeButtonLinkRolePropType;
     _tabIndex?: number;
     _target?: LinkTargetPropType;
-    _targetDescription?: string;
     _tooltipAlign?: TooltipAlignPropType;
     state: LinkStates;
     validateAccessKey(value?: AccessKeyPropType): void;
@@ -45,7 +44,6 @@ export declare class KolLinkWc implements API {
     validateRole(value?: AlternativeButtonLinkRolePropType): void;
     validateTabIndex(value?: number): void;
     validateTarget(value?: LinkTargetPropType): void;
-    validateTargetDescription(value?: string): void;
     validateTooltipAlign(value?: TooltipAlignPropType): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/link/shadow.d.ts

@@ -26,6 +26,5 @@ export declare class KolLink implements LinkProps {
     _role?: AlternativeButtonLinkRolePropType;
     _tabIndex?: number;
     _target?: LinkTargetPropType;
-    _targetDescription?: string;
     _tooltipAlign?: TooltipAlignPropType;
 }

package/dist/types/components/link/types.d.ts

@@ -12,7 +12,6 @@ import { PropHideLabel } from '../../types/props/hide-label';
 import { PropAccessKey } from '../../types/props/access-key';
 export type RequiredProps = PropHref;
 export type OptionalProps = {
-    targetDescription: string;
     tabIndex: number;
 } & PropAccessKey & PropAriaCurrentValue & PropAlternativeButtonLinkRole & PropDownload & PropHideLabel & PropIcons & PropLabelWithExpertSlot & PropLinkOnCallbacks & PropLinkTarget & PropTooltipAlign;
 export type LinkProps = Generic.Element.Members<RequiredProps, OptionalProps>;

package/dist/types/components/link-button/component.d.ts

@@ -28,7 +28,6 @@ export declare class KolLinkButton implements Props {
     _role?: AlternativeButtonLinkRolePropType;
     _tabIndex?: number;
     _target?: LinkTargetPropType;
-    _targetDescription?: string;
     _tooltipAlign?: TooltipAlignPropType;
     _variant?: ButtonVariantPropType;
 }

package/dist/types/components/table/component.d.ts

@@ -12,7 +12,6 @@ export declare class KolTable implements API {
     private pageEndSlice;
     private disableSort;
     private sortedColumnHead;
-    private ariaLive;
     _allowMultiSort?: boolean;
     _data: Stringified<KoliBriTableDataType[]>;
     _dataFoot?: Stringified<KoliBriTableDataType[]>;

package/dist/types/components.d.ts

@@ -31,6 +31,7 @@ import { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 import { KoliBriCardEventCallbacks } from "./components/card/types";
 import { EventCallbacks } from "./components/details/types";
 import { KoliBriFormCallbacks } from "./components/form/types";
+import { ErrorListPropType } from "./types/props/error-list";
 import { HeadingVariantPropType } from "./types/props/heading-variant";
 import { Loading } from "./utils/validators/loading";
 import { SuggestionsPropType } from "./types/props/suggestions";
@@ -88,6 +89,7 @@ export { ButtonOrLinkOrTextWithChildrenProps } from "./types/button-link-text";
 export { KoliBriCardEventCallbacks } from "./components/card/types";
 export { EventCallbacks } from "./components/details/types";
 export { KoliBriFormCallbacks } from "./components/form/types";
+export { ErrorListPropType } from "./types/props/error-list";
 export { HeadingVariantPropType } from "./types/props/heading-variant";
 export { Loading } from "./utils/validators/loading";
 export { SuggestionsPropType } from "./types/props/suggestions";
@@ -541,6 +543,10 @@ export namespace Components {
         "_open"?: boolean;
     }
     interface KolForm {
+        /**
+          * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
+         */
+        "_errorList"?: ErrorListPropType[];
         /**
           * Gibt die EventCallback-Funktionen für die Form-Events an.
          */
@@ -1795,10 +1801,6 @@ export namespace Components {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -1854,10 +1856,6 @@ export namespace Components {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -1931,10 +1929,6 @@ export namespace Components {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -3339,6 +3333,10 @@ declare namespace LocalJSX {
         "_open"?: boolean;
     }
     interface KolForm {
+        /**
+          * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
+         */
+        "_errorList"?: ErrorListPropType[];
         /**
           * Gibt die EventCallback-Funktionen für die Form-Events an.
          */
@@ -4538,10 +4536,6 @@ declare namespace LocalJSX {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -4597,10 +4591,6 @@ declare namespace LocalJSX {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
@@ -4674,10 +4664,6 @@ declare namespace LocalJSX {
           * Defines where to open the link.
          */
         "_target"?: LinkTargetPropType;
-        /**
-          * Defines the description to use when the link is going to be opened in another application.
-         */
-        "_targetDescription"?: string;
         /**
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */

package/dist/types/i18n.d.ts

@@ -2,7 +2,7 @@ import type { Generic } from 'adopted-style-sheets';
 import locale_de from './locales/de';
 type ResourcePrefix = 'Kol';
 type ComponentKeys = keyof typeof locale_de;
-export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "of" | "characters" | "message" | "close" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "pagination" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "sort-ascending" | "sort-descending" | "sort-then-ascending" | "sort-then-descending" | "sort-then-last-ascending" | "sort-then-last-descending" | "sort-none" | "table-sort-none" | "table-pagination-label" | "avatar-alt" | "toast-close-all">>;
+export declare const translations: Set<Generic.I18n.RegisterPatch<Generic.I18n.Locale.ISO_639_1, "Kol", "info" | "success" | "warning" | "error" | "of" | "characters" | "message" | "close" | "form-description" | "new" | "no-entries" | "change-order" | "action-running" | "action-done" | "pagination" | "page-first" | "page-back" | "page-next" | "page-last" | "entries-per-site" | "page-current" | "page-selected" | "page-per-site" | "nav-maximize" | "nav-minimize" | "logo-description" | "open-link-in-tab" | "kolibri-logo" | "table-pagination-label" | "avatar-alt" | "toast-close-all" | "error-list" | "error-list-message">>;
 type Options = {
     count?: number;
     placeholders?: {

package/dist/types/locales/de.d.ts

@@ -27,16 +27,10 @@ declare const _default: {
     'logo-description': string;
     'open-link-in-tab': string;
     'kolibri-logo': string;
-    'sort-ascending': string;
-    'sort-descending': string;
-    'sort-then-ascending': string;
-    'sort-then-descending': string;
-    'sort-then-last-ascending': string;
-    'sort-then-last-descending': string;
-    'sort-none': string;
-    'table-sort-none': string;
     'table-pagination-label': string;
     'avatar-alt': string;
     'toast-close-all': string;
+    'error-list': string;
+    'error-list-message': string;
 };
 export default _default;

package/dist/types/locales/en.d.ts

@@ -27,16 +27,10 @@ declare const _default: {
     'logo-description': string;
     'open-link-in-tab': string;
     'kolibri-logo': string;
-    'sort-descending': string;
-    'sort-ascending': string;
-    'sort-then-ascending': string;
-    'sort-then-descending': string;
-    'sort-then-last-ascending': string;
-    'sort-then-last-descending': string;
-    'sort-none': string;
-    'table-sort-none': string;
     'table-pagination-label': string;
     'avatar-alt': string;
     'toast-close-all': string;
+    'error-list': string;
+    'error-list-message': string;
 };
 export default _default;

package/dist/types/types/button-link-text.d.ts

@@ -11,7 +11,6 @@ type RequiredLinkProps = PropHref;
 type RequiredTextProps = PropLabel;
 type OptionalButtonOrLinkOrTextProps = PropHideLabel & {
     active: boolean;
-    targetDescription: string;
 } & PropIcons & PropLinkTarget;
 type OptionalButtonProps = OptionalButtonOrLinkOrTextProps & {
     disabled: boolean;

package/dist/types/types/props/error-list.d.ts

@@ -0,0 +1,9 @@
+import type { Generic } from 'adopted-style-sheets';
+export type ErrorListPropType = {
+    message: string;
+    selector: string;
+};
+export type PropErrorList = {
+    errorList: ErrorListPropType[];
+};
+export declare const validateErrorList: (component: Generic.Element.Component, value?: ErrorListPropType[]) => void;

package/dist/types/utils/dev.utils.d.ts

@@ -21,9 +21,9 @@ export declare class Log {
     static error(msg: unknown | unknown[], options?: LogShieldOptions): void;
     static throw(msg: unknown | unknown[], options?: LogShieldOptions): void;
 }
-declare const KoliBri: Record<string, unknown>;
+declare const getKoliBri: () => Record<string, unknown>;
 export declare const initKoliBri: () => void;
-export { KoliBri };
+export { getKoliBri };
 export declare const renderDevAdvice: () => void;
 declare let nonce: () => string;
 export { nonce };

package/doc/abbr.md

@@ -70,7 +70,7 @@ graph TD;
   kol-abbr --> kol-tooltip-wc
   kol-tooltip-wc --> kol-span-wc
   kol-span-wc --> kol-icon
-  style kol-abbr fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-abbr stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/accordion.md

@@ -141,7 +141,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-accordion fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-accordion stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/alert.md

@@ -121,7 +121,7 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
   kol-alert --> kol-alert-wc
-  style kol-alert-wc fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-alert-wc stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/avatar.md

@@ -63,7 +63,7 @@ Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefr
 ```mermaid
 graph TD;
   kol-avatar --> kol-avatar-wc
-  style kol-avatar-wc fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-avatar-wc stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/badge.md

@@ -129,7 +129,7 @@ graph TD;
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
   kol-version --> kol-badge
-  style kol-badge fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-badge stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/breadcrumb.md

@@ -112,7 +112,7 @@ graph TD;
   kol-link-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-breadcrumb stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/button-group.md

@@ -99,7 +99,7 @@ Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen i
 graph TD;
   kol-button-group --> kol-button-group-wc
   kol-tabs --> kol-button-group-wc
-  style kol-button-group-wc fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-button-group-wc stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/button-link.md

@@ -76,7 +76,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-button-link fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-button-link stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/button.md

@@ -156,7 +156,7 @@ graph TD;
   kol-nav --> kol-button
   kol-table --> kol-button
   kol-toast-container --> kol-button
-  style kol-button fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-button stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/card.md

@@ -100,7 +100,7 @@ graph TD;
   kol-button-wc --> kol-tooltip-wc
   kol-span-wc --> kol-icon
   kol-tooltip-wc --> kol-span-wc
-  style kol-card fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-card stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/details.md

@@ -117,7 +117,7 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 graph TD;
   kol-details --> kol-icon
   kol-details --> kol-indented-text
-  style kol-details fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-details stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/form.md

@@ -25,10 +25,11 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                     | Type                                                                                                          | Default     |
-| --------------- | ---------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
-| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.                                       | `undefined` \| `{ onSubmit?: EventCallback<Event>` \| `undefined; onReset?: EventCallback<Event>` \| `undefined; }` | `undefined` |
-| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
+| Property        | Attribute        | Description                                                                                                                                                                             | Type                                                                                                          | Default     |
+| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_errorList`    | --               | A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error. | `ErrorListPropType[]` \| `undefined`                                                                            | `undefined` |
+| `_on`           | --               | Gibt die EventCallback-Funktionen für die Form-Events an.                                                                                                                               | `undefined` \| `{ onSubmit?: EventCallback<Event>` \| `undefined; onReset?: EventCallback<Event>` \| `undefined; }` | `undefined` |
+| `_requiredText` | `_required-text` | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.                                                                                         | `boolean` \| `string` \| `undefined`                                                                              | `true`      |
 
 
 ## Slots
@@ -42,13 +43,29 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 
 ### Depends on
 
+- [kol-alert](../alert)
+- [kol-link](../link)
 - [kol-indented-text](../indented-text)
 
 ### Graph
 ```mermaid
 graph TD;
+  kol-form --> kol-alert
+  kol-form --> kol-link
   kol-form --> kol-indented-text
-  style kol-form fill:#f9f,stroke:#333,stroke-width:4px
+  kol-alert --> kol-alert-wc
+  kol-alert-wc --> kol-heading-wc
+  kol-alert-wc --> kol-button-wc
+  kol-alert-wc --> kol-icon
+  kol-button-wc --> kol-span-wc
+  kol-button-wc --> kol-tooltip-wc
+  kol-span-wc --> kol-icon
+  kol-tooltip-wc --> kol-span-wc
+  kol-link --> kol-link-wc
+  kol-link-wc --> kol-span-wc
+  kol-link-wc --> kol-icon
+  kol-link-wc --> kol-tooltip-wc
+  style kol-form stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/heading.md

@@ -69,7 +69,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-card --> kol-heading-wc
   kol-heading --> kol-heading-wc
-  style kol-heading-wc fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-heading-wc stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/icon.md

@@ -82,7 +82,7 @@ graph TD;
   kol-input-checkbox --> kol-icon
   kol-link-wc --> kol-icon
   kol-span-wc --> kol-icon
-  style kol-icon fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-icon stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/indented-text.md

@@ -57,7 +57,7 @@ Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informatione
 graph TD;
   kol-details --> kol-indented-text
   kol-form --> kol-indented-text
-  style kol-indented-text fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-indented-text stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-checkbox.md

@@ -127,7 +127,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-checkbox stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-color.md

@@ -113,7 +113,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-color fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-color stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-date.md

@@ -148,7 +148,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-date fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-date stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-email.md

@@ -117,7 +117,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-email fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-email stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-file.md

@@ -108,7 +108,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-file fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-file stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-number.md

@@ -107,7 +107,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-number fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-number stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-password.md

@@ -107,7 +107,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-password fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-password stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-radio.md

@@ -143,7 +143,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-radio fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-radio stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-range.md

@@ -118,7 +118,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-range fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-range stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

package/doc/input-text.md

@@ -128,7 +128,7 @@ graph TD;
   kol-alert-wc --> kol-heading-wc
   kol-alert-wc --> kol-button-wc
   kol-alert-wc --> kol-icon
-  style kol-input-text fill:#f9f,stroke:#333,stroke-width:4px
+  style kol-input-text stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------