@public-ui/components 1.1.15-rc.6 → 1.1.15-rc.7

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

@@ -1,6 +1,6 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@public-ui/core';
-import { AriaCurrent, LinkOnCallbacks, LinkStates, LinkTarget, LinkUseCase, OptionalLinkProps, OptionalLinkStates, RequiredLinkProps, RequiredLinkStates } from '../../types/button-link';
+import { AlternativButtonLinkRole, AriaCurrent, LinkOnCallbacks, LinkStates, LinkTarget, LinkUseCase, OptionalLinkProps, OptionalLinkStates, RequiredLinkProps, RequiredLinkStates } from '../../types/button-link';
 import { Alignment, KoliBriIconProp } from '../../types/icon';
 import { TooltipAlignment } from '../tooltip/component';
 import { Stringified } from '../../types/common';
@@ -27,6 +27,7 @@ export declare class KolLinkWc implements Generic.Element.ComponentApi<RequiredL
   _iconOnly?: boolean;
   _on?: LinkOnCallbacks;
   _part?: string;
+  _role?: AlternativButtonLinkRole;
   _selector?: string;
   _stealth?: boolean;
   _tabIndex?: number;
@@ -47,16 +48,17 @@ export declare class KolLinkWc implements Generic.Element.ComponentApi<RequiredL
   validateIcon(value?: KoliBriIconProp): void;
   validateIconAlign(value?: Alignment): void;
   validateIconOnly(value?: boolean): void;
+  validateOn(value?: LinkOnCallbacks): void;
+  validatePart(value?: string): void;
+  validateRole(value?: AlternativButtonLinkRole): void;
   validateSelector(value?: string): void;
   validateStealth(value?: boolean): void;
   validateTabIndex(value?: number): void;
   validateTarget(value?: LinkTarget): void;
   validateTargetDescription(value?: string): void;
+  validateTooltipAlign(value?: TooltipAlignment): void;
   validateUnderline(value?: boolean): void;
   validateUseCase(value?: LinkUseCase): void;
-  validatePart(value?: string): void;
-  validateTooltipAlign(value?: TooltipAlignment): void;
-  validateOn(value?: LinkOnCallbacks): void;
   componentWillLoad(): void;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Alignment, KoliBriIconProp } from '../../types/icon';
 import { Generic } from '@public-ui/core';
-import { AriaCurrent, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkProps, RequiredLinkProps } from '../../types/button-link';
+import { AlternativButtonLinkRole, AriaCurrent, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkProps, RequiredLinkProps } from '../../types/button-link';
 import { TooltipAlignment } from '../tooltip/component';
 import { Stringified } from '../../types/common';
 export declare class KolLink implements Generic.Element.Members<RequiredLinkProps, OptionalLinkProps> {
@@ -19,6 +19,7 @@ export declare class KolLink implements Generic.Element.Members<RequiredLinkProp
   _iconOnly?: boolean;
   _on?: LinkOnCallbacks;
   _part?: string;
+  _role?: AlternativButtonLinkRole;
   _selector?: string;
   _stealth?: boolean;
   _tabIndex?: number;

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

@@ -1,6 +1,6 @@
 import { JSX } from '../../stencil-public-runtime';
 import { Generic } from '@public-ui/core';
-import { AriaCurrent, KoliBriButtonVariant, LinkButtonStates, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkButtonProps, OptionalLinkButtonStates, RequiredLinkButtonProps, RequiredLinkButtonStates } from '../../types/button-link';
+import { AlternativButtonLinkRole, AriaCurrent, KoliBriButtonVariant, LinkButtonStates, LinkOnCallbacks, LinkTarget, LinkUseCase, OptionalLinkButtonProps, OptionalLinkButtonStates, RequiredLinkButtonProps, RequiredLinkButtonStates } from '../../types/button-link';
 import { Stringified } from '../../types/common';
 import { Alignment, KoliBriIconProp } from '../../types/icon';
 import { TooltipAlignment } from '../tooltip/component';
@@ -23,6 +23,7 @@ export declare class KolLinkButton implements Generic.Element.ComponentApi<Requi
   _label: string;
   _on?: LinkOnCallbacks;
   _part?: string;
+  _role?: AlternativButtonLinkRole;
   _selector?: string;
   _stealth?: boolean;
   _tabIndex?: number;
@@ -46,16 +47,17 @@ export declare class KolLinkButton implements Generic.Element.ComponentApi<Requi
   validateIconAlign(value?: Alignment): void;
   validateIconOnly(value?: boolean): void;
   validateLabel(value?: string): void;
+  validateOn(value?: LinkOnCallbacks): void;
+  validatePart(value?: string): void;
+  validateRole(value?: AlternativButtonLinkRole): void;
   validateSelector(value?: string): void;
   validateStealth(value?: boolean): void;
   validateTabIndex(value?: number): void;
   validateTarget(value?: LinkTarget): void;
   validateTargetDescription(value?: string): void;
+  validateTooltipAlign(value?: TooltipAlignment): void;
   validateUnderline(value?: boolean): void;
   validateUseCase(value?: LinkUseCase): void;
-  validatePart(value?: string): void;
-  validateTooltipAlign(value?: TooltipAlignment): void;
-  validateOn(value?: LinkOnCallbacks): void;
   validateVariant(value?: KoliBriButtonVariant): void;
   componentWillLoad(): void;
 }

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

@@ -44,18 +44,19 @@ declare type OptionalStates = {
 };
 declare type States = Generic.Element.Members<RequiredStates, OptionalStates>;
 export declare class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {
-  private hostElement;
-  private tabsElement?;
-  private htmlElements?;
+  private readonly host?;
+  private tabPanelsElement?;
   private onCreateLabel;
   private showCreateTab;
   private selectedTimeout?;
+  private readonly nonce;
   private nextPossibleTabIndex;
   private onKeyDown;
   private readonly onClickSelect;
   private readonly onMouseDown;
   private renderButtonGroup;
-  private readonly catchHostElement;
+  private tabPanelHost?;
+  private readonly catchTabPanelHost;
   render(): JSX.Element;
   _ariaLabel: string;
   _on?: KoliBriTabsCallbacks;
@@ -71,6 +72,7 @@ export declare class KolTabs implements Generic.Element.ComponentApi<RequiredPro
   validateTabs(value?: Stringified<TabButtonProps[]>): void;
   validateTabsAlign(value?: Alignment): void;
   componentWillLoad(): void;
+  private readonly handleTabPanels;
   componentDidRender(): void;
   private onSelect;
   private onCreate;

package/dist/types/components.d.ts

@@ -12,7 +12,7 @@ import { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from "./types/ale
 import { KoliBriColor } from "./components/badge/component";
 import { Stringified } from "./types/common";
 import { Alignment, KoliBriIconProp } from "./types/icon";
-import { AriaCurrent, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkTarget, LinkUseCase } from "./types/button-link";
+import { AlternativButtonLinkRole, AriaCurrent, ButtonProps, KoliBriButtonCallbacks, KoliBriButtonType, KoliBriButtonVariant, LinkOnCallbacks, LinkTarget, LinkUseCase } from "./types/button-link";
 import { NavLinkProps } from "./components/link/component";
 import { KoliBriFormCallbacks } from "./components/form/component";
 import { FontAwesome, FontAwesomeOssPrefix } from "./enums/font-awesome";
@@ -154,6 +154,10 @@ export namespace Components {
           * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
          */
@@ -187,6 +191,10 @@ export namespace Components {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -233,6 +241,10 @@ export namespace Components {
           * Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, ob der Button deaktiviert ist.
          */
@@ -262,6 +274,10 @@ export namespace Components {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -293,9 +309,13 @@ export namespace Components {
          */
         "_ariaExpanded"?: boolean;
         /**
-          * Gibt einen Text des Buttons für den Screenreader an. Für die Sprachsteuerung muss der Aria-Text mit dem Label-Text des Buttons beginnen. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+          * Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
          */
@@ -329,6 +349,10 @@ export namespace Components {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -1442,6 +1466,10 @@ export namespace Components {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */
@@ -1493,7 +1521,7 @@ export namespace Components {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
         "_ariaSelected"?: boolean;
         /**
@@ -1538,6 +1566,10 @@ export namespace Components {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */
@@ -1623,7 +1655,7 @@ export namespace Components {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
         "_ariaSelected"?: boolean;
         /**
@@ -1660,6 +1692,10 @@ export namespace Components {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */
@@ -2646,6 +2682,10 @@ declare namespace LocalJSX {
           * Gibt einen beschreibenden Text des Buttons an.  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
          */
@@ -2679,6 +2719,10 @@ declare namespace LocalJSX {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -2721,6 +2765,10 @@ declare namespace LocalJSX {
           * Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, ob der Button deaktiviert ist.
          */
@@ -2750,6 +2798,10 @@ declare namespace LocalJSX {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -2781,9 +2833,13 @@ declare namespace LocalJSX {
          */
         "_ariaExpanded"?: boolean;
         /**
-          * Gibt einen Text des Buttons für den Screenreader an. Für die Sprachsteuerung muss der Aria-Text mit dem Label-Text des Buttons beginnen. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+          * Gibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen.  - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
          */
         "_ariaLabel"?: string;
+        /**
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+         */
+        "_ariaSelected"?: boolean;
         /**
           * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.
          */
@@ -2817,6 +2873,10 @@ declare namespace LocalJSX {
           * Gibt die EventCallback-Funktionen für die Button-Events an.
          */
         "_on"?: KoliBriButtonCallbacks;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
          */
@@ -3926,6 +3986,10 @@ declare namespace LocalJSX {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */
@@ -3977,7 +4041,7 @@ declare namespace LocalJSX {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
         "_ariaSelected"?: boolean;
         /**
@@ -4022,6 +4086,10 @@ declare namespace LocalJSX {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */
@@ -4107,7 +4175,7 @@ declare namespace LocalJSX {
          */
         "_ariaLabel"?: string;
         /**
-          * Gibt an, ob der Link gerade ausgewählt ist. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+          * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
          */
         "_ariaSelected"?: boolean;
         /**
@@ -4144,6 +4212,10 @@ declare namespace LocalJSX {
           * Gibt den Identifier für den CSS-Part an, um das Icon von Außen ändern zu können. (https://meowni.ca/posts/part-theme-explainer/)
          */
         "_part"?: string;
+        /**
+          * Gibt an, welche Role der Schalter hat.
+         */
+        "_role"?: AlternativButtonLinkRole;
         /**
           * Gibt die ID eines DOM-Elements, zu dem gesprungen werden soll, aus.
          */

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

@@ -5,16 +5,19 @@ import { EventCallback } from './callbacks';
 import { Alignment, KoliBriCustomIcon, KoliBriIconProp } from './icon';
 import { Stringified } from './common';
 export declare type AriaCurrent = boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+export declare type AlternativButtonLinkRole = 'tab';
 declare type RequiredButtonAndLinkProps = unknown;
 declare type OptionalButtonAndLinkProps = {
   ariaControls: string;
   ariaCurrent: AriaCurrent;
   ariaExpanded: boolean;
   ariaLabel: string;
+  ariaSelected: boolean;
   disabled: boolean;
   icon: Stringified<KoliBriIconProp>;
   iconAlign: Alignment;
   iconOnly: boolean;
+  role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: TooltipAlignment;
 };
@@ -32,8 +35,10 @@ declare type OptionalButtonAndLinkStates = {
   ariaControls: string;
   ariaCurrent: AriaCurrent;
   ariaExpanded: boolean;
+  ariaSelected: boolean;
   disabled: boolean;
   iconOnly: boolean;
+  role: AlternativButtonLinkRole;
   tabIndex: number;
   tooltipAlign: TooltipAlignment;
 };
@@ -78,7 +83,6 @@ export declare type LinkTarget = '_blank' | '_parent' | '_self' | '_top' | strin
 export declare type LinkUseCase = 'text' | 'image' | 'nav';
 export declare type RequiredLinkProps = RequiredButtonAndLinkProps;
 export declare type OptionalLinkProps = OptionalButtonAndLinkProps & {
-  ariaSelected: boolean;
   fill: boolean;
   href: string;
   on: LinkOnCallbacks;