@public-ui/components 2.1.4-alpha.1 → 2.1.4

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

@@ -1,10 +1,12 @@
-import type { HideErrorPropType, IdPropType, InputTypeOnDefault, KoliBriHorizontalIcons, LabelWithExpertSlotPropType, MsgPropType, NamePropType, OptionsWithOptgroupPropType, RowsPropType, SelectAPI, SelectStates, Stringified, SyncValueBySelectorPropType, TooltipAlignPropType, W3CInputValue } from '../../schema';
+import type { FocusableElement, HideErrorPropType, IdPropType, InputTypeOnDefault, KoliBriHorizontalIcons, LabelWithExpertSlotPropType, MsgPropType, NamePropType, OptionsWithOptgroupPropType, RowsPropType, SelectAPI, SelectStates, Stringified, SyncValueBySelectorPropType, TooltipAlignPropType, W3CInputValue } from '../../schema';
 import type { JSX } from '../../stencil-public-runtime';
-export declare class KolSelect implements SelectAPI {
+export declare class KolSelect implements SelectAPI, FocusableElement {
     private readonly host?;
-    private ref?;
+    private selectRef?;
     private readonly catchRef;
     getValue(): Promise<Stringified<W3CInputValue[]> | undefined>;
+    focus(): Promise<void>;
+    kolFocus(): Promise<void>;
     private renderOptgroup;
     render(): JSX.Element;
     private readonly controller;

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

@@ -1,10 +1,12 @@
-import type { AdjustHeightPropType, CSSResize, HasCounterPropType, HideErrorPropType, IdPropType, InputTypeOnDefault, KoliBriHorizontalIcons, LabelWithExpertSlotPropType, MsgPropType, NamePropType, Stringified, RowsPropType, SyncValueBySelectorPropType, TextareaAPI, TextareaStates, TooltipAlignPropType } from '../../schema';
+import type { AdjustHeightPropType, CSSResize, FocusableElement, HasCounterPropType, HideErrorPropType, IdPropType, InputTypeOnDefault, KoliBriHorizontalIcons, LabelWithExpertSlotPropType, MsgPropType, NamePropType, RowsPropType, Stringified, SyncValueBySelectorPropType, TextareaAPI, TextareaStates, TooltipAlignPropType } from '../../schema';
 import type { JSX } from '../../stencil-public-runtime';
-export declare class KolTextarea implements TextareaAPI {
+export declare class KolTextarea implements TextareaAPI, FocusableElement {
     private readonly host?;
-    private ref?;
+    private textareaRef?;
     private readonly catchRef;
     getValue(): Promise<string | undefined>;
+    focus(): Promise<void>;
+    kolFocus(): Promise<void>;
     render(): JSX.Element;
     private readonly controller;
     _accessKey?: string;

package/dist/types/components.d.ts

@@ -44,6 +44,11 @@ export namespace Components {
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolAlert {
         /**
@@ -233,7 +238,12 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: ButtonVariantPropType;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<Stringified<StencilUnknown> | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolButtonGroup {
     }
@@ -312,7 +322,12 @@ export namespace Components {
           * Defines the value that the button emits on click.
          */
         "_value"?: Stringified<StencilUnknown>;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<Stringified<StencilUnknown> | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolButtonWc {
         /**
@@ -392,6 +407,7 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: ButtonVariantPropType;
+        "kolFocus": () => Promise<void>;
     }
     interface KolCard {
         /**
@@ -517,6 +533,11 @@ export namespace Components {
           * @TODO : Change type back to `OpenPropType` after Stencil#4663 has been resolved.
          */
         "_open"?: boolean;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolDrawer {
         /**
@@ -815,7 +836,12 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: InputCheckboxVariant;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<StencilUnknown>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputColor {
         /**
@@ -907,7 +933,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: string;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputDate {
         /**
@@ -1025,7 +1056,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: Iso8601 | Date | null;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputEmail {
         /**
@@ -1148,7 +1184,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: string;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputFile {
         /**
@@ -1246,7 +1287,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: string;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<FileList | null | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputNumber {
         /**
@@ -1364,7 +1410,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: number | Iso8601 | null;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputPassword {
         /**
@@ -1483,7 +1534,12 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: PasswordVariantPropType;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputRadio {
         /**
@@ -1573,7 +1629,12 @@ export namespace Components {
           * @see Known bug: https://github.com/ionic-team/stencil/issues/3902
          */
         "_value"?: StencilUnknown;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<StencilUnknown | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputRange {
         /**
@@ -1673,7 +1734,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: number;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<number | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolInputText {
         /**
@@ -1797,7 +1863,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: string;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolKolibri {
         /**
@@ -1863,6 +1934,11 @@ export namespace Components {
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
         "_tooltipAlign"?: TooltipAlignPropType;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolLinkButton {
         /**
@@ -1926,6 +2002,11 @@ export namespace Components {
           * Defines which variant should be used for presentation.
          */
         "_variant"?: ButtonVariantPropType;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolLinkGroup {
         /**
@@ -2008,6 +2089,7 @@ export namespace Components {
           * Defines where to show the Tooltip preferably: top, right, bottom or left.
          */
         "_tooltipAlign"?: TooltipAlignPropType;
+        "kolFocus": () => Promise<void>;
     }
     /**
      * @deprecated 
@@ -2261,7 +2343,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: Stringified<W3CInputValue[]>;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<Stringified<W3CInputValue[]> | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolSkipNav {
         /**
@@ -2695,7 +2782,12 @@ export namespace Components {
           * Defines the value of the input.
          */
         "_value"?: string;
+        /**
+          * @deprecated Use kolFocus instead.
+         */
+        "focus": () => Promise<void>;
         "getValue": () => Promise<string | undefined>;
+        "kolFocus": () => Promise<void>;
     }
     interface KolToastContainer {
         "closeAll": (immediate?: boolean) => Promise<void>;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { KoliBriDevHelper, Optgroup, Option, SelectOption } from './schema';
-export type { Toast, ToasterOptions, KoliBriTableSelection, KoliBriTableCell } from './schema';
+export type { Toast, ToasterOptions, KoliBriTableSelection, KoliBriTableCell, FocusableElement } from './schema';
 export { KoliBri } from './schema';
 export * from './components.d';
 export { setCurrentLocation } from './components/link/ariaCurrentService';

package/dist/types/schema/index.d.ts

@@ -5,3 +5,4 @@ export * from './props';
 export * from './types';
 export * from './utils';
 export * from './validators';
+export * from './interfaces';

package/dist/types/schema/interfaces/FocusableElement.d.ts

@@ -0,0 +1,3 @@
+export interface FocusableElement {
+    kolFocus(): Promise<void>;
+}

package/dist/types/schema/interfaces/index.d.ts

@@ -0,0 +1 @@
+export*from"./FocusableElement";

package/doc/accordion.md

@@ -1,5 +1,7 @@
 # Accordion
 
+Synonyme: Collapse
+
 Die **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.
 
 Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten.
@@ -119,6 +121,29 @@ Standardansicht gelegt.
 | `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                               | `false`     |
 
 
+## Methods
+
+### `focus() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Slots
 
 | Slot | Description                                                                     |

package/doc/alert.md

@@ -1,5 +1,7 @@
 # Alert
 
+Synonyme: Message
+
 Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des Alert.
 
 ## Konstruktion

package/doc/avatar.md

@@ -1,5 +1,7 @@
 # Avatar
 
+Synonyme: Persona
+
 Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.
 
 ## Konstruktion

package/doc/button-link.md

@@ -74,6 +74,16 @@ kolibriElement._on = {
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
 
 
@@ -84,6 +94,16 @@ Type: `Promise<Stringified<StencilUnknown>>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ----------------------------------------------
 

package/doc/button.md

@@ -145,6 +145,16 @@ Probleme mit Disabled-Status
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<Stringified<StencilUnknown> | undefined>`
 
 
@@ -155,6 +165,16 @@ Type: `Promise<Stringified<StencilUnknown>>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ----------------------------------------------
 

package/doc/combobox.md

@@ -1,5 +1,7 @@
 # Combobox `preview`
 
+Synonyme: Autocomplete, Select, Dropdown
+
 <kol-alert _type="warning" _variant="card">
   <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
 </kol-alert>

package/doc/details.md

@@ -1,5 +1,7 @@
 # Details
 
+Synonyme: Disclosure, Collapse, Summary Detail
+
 Mit Hilfe der **Detail**-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick
 durch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.
 
@@ -99,6 +101,29 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 | `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean` \| `undefined`                                                                | `false`     |
 
 
+## Methods
+
+### `focus() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Slots
 
 | Slot | Description                                               |

package/doc/drawer.md

@@ -1,5 +1,7 @@
 # Drawer (Sidebar) `preview`
 
+Synonyme: Modal, Modal Dialog, Corner Dialog, Prompt
+
 <kol-alert _type="warning" _variant="card">
   <kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
 </kol-alert>

package/doc/image.md

@@ -1,5 +1,7 @@
 # Image
 
+Synonyme: Img, Thumbnail
+
 > <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.
 
 Die **Image**-Komponente dient dazu, Bilder darzustellen.

package/doc/input-checkbox.md

@@ -109,6 +109,16 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<StencilUnknown>`
 
 
@@ -119,6 +129,16 @@ Type: `Promise<StencilUnknown>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots
 

package/doc/input-color.md

@@ -74,6 +74,16 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<string | undefined>`
 
 
@@ -84,6 +94,16 @@ Type: `Promise<string | undefined>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots
 

package/doc/input-date.md

@@ -1,5 +1,7 @@
 # InputDate
 
+Synonyme: Date Picker, Datetime Picker, Week Picker Month Picker, Time Picker, Calendar
+
 Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.
 
 ## Konstruktion
@@ -133,6 +135,16 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<string | undefined>`
 
 
@@ -143,6 +155,16 @@ Type: `Promise<string | undefined>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots
 

package/doc/input-email.md

@@ -102,6 +102,16 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<string | undefined>`
 
 
@@ -112,6 +122,16 @@ Type: `Promise<string | undefined>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots
 

package/doc/input-file.md

@@ -1,5 +1,7 @@
 # InputFile
 
+Synonyme: Upload, File Uploader, File Picker, File Selector
+
 Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.
 
 ## Konstruktion
@@ -93,6 +95,16 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 
 ## Methods
 
+### `focus() => Promise<void>`
+
+<span style="color:red">**[DEPRECATED]**</span> Use kolFocus instead.<br/><br/>
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `getValue() => Promise<FileList | null | undefined>`
 
 
@@ -103,6 +115,16 @@ Type: `Promise<FileList | null | undefined>`
 
 
 
+### `kolFocus() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 
 ## Slots