@db-ux/wc-core-components 2.4.4 → 3.0.0

package/dist/types/components/tag/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {
@@ -18,10 +18,6 @@ export type DBTagDefaultProps = {
      *  - removable: add a remove button at the end of the tag
      */
     behavior?: TagBehaviorType | string;
-    /**
-     * @deprecated Disable tag
-     */
-    disabled?: boolean | string;
     /**
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
@@ -48,4 +44,4 @@ export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
     handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;
 };
-export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;
+export type DBTagState = DBTagDefaultState & GlobalState;

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

@@ -7,7 +7,6 @@ import { EventEmitter } from "../../stencil-public-runtime";
  */
 export declare class DBTag {
     private _ref;
-    disabled: DBTagProps["disabled"];
     remove: EventEmitter<Parameters<Required<DBTagProps>["remove"]>[number]> | void;
     removeButton: DBTagProps["removeButton"];
     id: DBTagProps["id"];
@@ -21,7 +20,6 @@ export declare class DBTag {
     overflow: DBTagProps["overflow"];
     text: DBTagProps["text"];
     behavior: DBTagProps["behavior"];
-    initialized: boolean;
     handleRemove(event?: ClickEvent<HTMLButtonElement> | void): void;
     getRemoveButtonText(): string;
     /**
@@ -30,8 +28,6 @@ export declare class DBTag {
      * @param customElementSelector  the custom element like `my-component`
      */
     private enableAttributePassing;
-    watch0Fn(): void;
-    watch0(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -115,20 +115,19 @@ export namespace Components {
         "text": DBBrandProps["text"];
     }
     interface DbButton {
-        "ariaexpanded": DBButtonProps["ariaexpanded"];
-        "ariapressed": DBButtonProps["ariapressed"];
         "className": DBButtonProps["className"];
-        "describedbyid": DBButtonProps["describedbyid"];
         "disabled": DBButtonProps["disabled"];
         "form": DBButtonProps["form"];
         "icon": DBButtonProps["icon"];
+        "iconLeading": DBButtonProps["iconLeading"];
+        "iconTrailing": DBButtonProps["iconTrailing"];
         "id": DBButtonProps["id"];
-        "label": DBButtonProps["label"];
         "name": DBButtonProps["name"];
         "noText": DBButtonProps["noText"];
         "showIcon": DBButtonProps["showIcon"];
+        "showIconLeading": DBButtonProps["showIconLeading"];
+        "showIconTrailing": DBButtonProps["showIconTrailing"];
         "size": DBButtonProps["size"];
-        "state": DBButtonProps["state"];
         "text": DBButtonProps["text"];
         "type": DBButtonProps["type"];
         "value": DBButtonProps["value"];
@@ -309,7 +308,8 @@ export namespace Components {
         "fieldSizing": DBInputProps["fieldSizing"];
         "form": DBInputProps["form"];
         "icon": DBInputProps["icon"];
-        "iconAfter": DBInputProps["iconAfter"];
+        "iconLeading": DBInputProps["iconLeading"];
+        "iconTrailing": DBInputProps["iconTrailing"];
         "id": DBInputProps["id"];
         "invalidMessage": DBInputProps["invalidMessage"];
         "label": DBInputProps["label"];
@@ -321,6 +321,7 @@ export namespace Components {
         "min": DBInputProps["min"];
         "minLength": DBInputProps["minLength"];
         "minlength": DBInputProps["minlength"];
+        "multiple": DBInputProps["multiple"];
         "name": DBInputProps["name"];
         "pattern": DBInputProps["pattern"];
         "placeholder": DBInputProps["placeholder"];
@@ -328,6 +329,8 @@ export namespace Components {
         "readonly": DBInputProps["readonly"];
         "required": DBInputProps["required"];
         "showIcon": DBInputProps["showIcon"];
+        "showIconLeading": DBInputProps["showIconLeading"];
+        "showIconTrailing": DBInputProps["showIconTrailing"];
         "showLabel": DBInputProps["showLabel"];
         "showMessage": DBInputProps["showMessage"];
         "showRequiredAsterisk": DBInputProps["showRequiredAsterisk"];
@@ -342,25 +345,22 @@ export namespace Components {
     interface DbLink {
         "className": DBLinkProps["className"];
         "content": DBLinkProps["content"];
-        "current": DBLinkProps["current"];
         "disabled": DBLinkProps["disabled"];
         "href": DBLinkProps["href"];
         "hreflang": DBLinkProps["hreflang"];
         "id": DBLinkProps["id"];
-        "label": DBLinkProps["label"];
         "rel": DBLinkProps["rel"];
         "role": DBLinkProps["role"];
-        "selected": DBLinkProps["selected"];
         "showIcon": DBLinkProps["showIcon"];
         "size": DBLinkProps["size"];
         "target": DBLinkProps["target"];
         "text": DBLinkProps["text"];
         "variant": DBLinkProps["variant"];
+        "wrap": DBLinkProps["wrap"];
     }
     interface DbNavigation {
         "className": DBNavigationProps["className"];
         "id": DBNavigationProps["id"];
-        "labelledBy": DBNavigationProps["labelledBy"];
     }
     interface DbNavigationItem {
         "active": DBNavigationItemProps["active"];
@@ -414,10 +414,8 @@ export namespace Components {
         "width": DBPopoverProps["width"];
     }
     interface DbRadio {
-        "ariaDescribedBy": DBRadioProps["ariaDescribedBy"];
         "checked": DBRadioProps["checked"];
         "className": DBRadioProps["className"];
-        "describedbyid": DBRadioProps["describedbyid"];
         "disabled": DBRadioProps["disabled"];
         "id": DBRadioProps["id"];
         "label": DBRadioProps["label"];
@@ -472,14 +470,13 @@ export namespace Components {
         "wrap": DBStackProps["wrap"];
     }
     interface DbSwitch {
-        "ariaDescribedBy": DBSwitchProps["ariaDescribedBy"];
         "checked": DBSwitchProps["checked"];
         "className": DBSwitchProps["className"];
-        "describedbyid": DBSwitchProps["describedbyid"];
         "disabled": DBSwitchProps["disabled"];
         "emphasis": DBSwitchProps["emphasis"];
         "icon": DBSwitchProps["icon"];
-        "iconAfter": DBSwitchProps["iconAfter"];
+        "iconLeading": DBSwitchProps["iconLeading"];
+        "iconTrailing": DBSwitchProps["iconTrailing"];
         "id": DBSwitchProps["id"];
         "label": DBSwitchProps["label"];
         "name": DBSwitchProps["name"];
@@ -495,15 +492,17 @@ export namespace Components {
         "active": DBTabItemProps["active"];
         "checked": DBTabItemProps["checked"];
         "className": DBTabItemProps["className"];
-        "controls": DBTabItemProps["controls"];
         "disabled": DBTabItemProps["disabled"];
         "icon": DBTabItemProps["icon"];
-        "iconAfter": DBTabItemProps["iconAfter"];
+        "iconLeading": DBTabItemProps["iconLeading"];
+        "iconTrailing": DBTabItemProps["iconTrailing"];
         "id": DBTabItemProps["id"];
         "label": DBTabItemProps["label"];
         "name": DBTabItemProps["name"];
         "noText": DBTabItemProps["noText"];
         "showIcon": DBTabItemProps["showIcon"];
+        "showIconLeading": DBTabItemProps["showIconLeading"];
+        "showIconTrailing": DBTabItemProps["showIconTrailing"];
     }
     interface DbTabList {
         "className": DBTabListProps["className"];
@@ -513,7 +512,6 @@ export namespace Components {
         "className": DBTabPanelProps["className"];
         "content": DBTabPanelProps["content"];
         "id": DBTabPanelProps["id"];
-        "labelledBy": DBTabPanelProps["labelledBy"];
     }
     interface DbTabs {
         "alignment": DBTabsProps["alignment"];
@@ -531,7 +529,6 @@ export namespace Components {
     interface DbTag {
         "behavior": DBTagProps["behavior"];
         "className": DBTagProps["className"];
-        "disabled": DBTagProps["disabled"];
         "emphasis": DBTagProps["emphasis"];
         "icon": DBTagProps["icon"];
         "id": DBTagProps["id"];
@@ -594,6 +591,10 @@ export interface DbAccordionItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbAccordionItemElement;
 }
+export interface DbButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDbButtonElement;
+}
 export interface DbCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbCardElement;
@@ -694,7 +695,18 @@ declare global {
         prototype: HTMLDbBrandElement;
         new (): HTMLDbBrandElement;
     };
+    interface HTMLDbButtonElementEventMap {
+        "click": any;
+    }
     interface HTMLDbButtonElement extends Components.DbButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDbButtonElementEventMap>(type: K, listener: (this: HTMLDbButtonElement, ev: DbButtonCustomEvent<HTMLDbButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDbButtonElementEventMap>(type: K, listener: (this: HTMLDbButtonElement, ev: DbButtonCustomEvent<HTMLDbButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDbButtonElement: {
         prototype: HTMLDbButtonElement;
@@ -1160,20 +1172,20 @@ declare namespace LocalJSX {
         "text"?: DBBrandProps["text"];
     }
     interface DbButton {
-        "ariaexpanded"?: DBButtonProps["ariaexpanded"];
-        "ariapressed"?: DBButtonProps["ariapressed"];
         "className"?: DBButtonProps["className"];
-        "describedbyid"?: DBButtonProps["describedbyid"];
         "disabled"?: DBButtonProps["disabled"];
         "form"?: DBButtonProps["form"];
         "icon"?: DBButtonProps["icon"];
+        "iconLeading"?: DBButtonProps["iconLeading"];
+        "iconTrailing"?: DBButtonProps["iconTrailing"];
         "id"?: DBButtonProps["id"];
-        "label"?: DBButtonProps["label"];
         "name"?: DBButtonProps["name"];
         "noText"?: DBButtonProps["noText"];
+        "onClick"?: (event: DbButtonCustomEvent<any>) => void;
         "showIcon"?: DBButtonProps["showIcon"];
+        "showIconLeading"?: DBButtonProps["showIconLeading"];
+        "showIconTrailing"?: DBButtonProps["showIconTrailing"];
         "size"?: DBButtonProps["size"];
-        "state"?: DBButtonProps["state"];
         "text"?: DBButtonProps["text"];
         "type"?: DBButtonProps["type"];
         "value"?: DBButtonProps["value"];
@@ -1365,7 +1377,8 @@ declare namespace LocalJSX {
         "fieldSizing"?: DBInputProps["fieldSizing"];
         "form"?: DBInputProps["form"];
         "icon"?: DBInputProps["icon"];
-        "iconAfter"?: DBInputProps["iconAfter"];
+        "iconLeading"?: DBInputProps["iconLeading"];
+        "iconTrailing"?: DBInputProps["iconTrailing"];
         "id"?: DBInputProps["id"];
         "invalidMessage"?: DBInputProps["invalidMessage"];
         "label"?: DBInputProps["label"];
@@ -1377,6 +1390,7 @@ declare namespace LocalJSX {
         "min"?: DBInputProps["min"];
         "minLength"?: DBInputProps["minLength"];
         "minlength"?: DBInputProps["minlength"];
+        "multiple"?: DBInputProps["multiple"];
         "name"?: DBInputProps["name"];
         "onBlur"?: (event: DbInputCustomEvent<any>) => void;
         "onChange"?: (event: DbInputCustomEvent<any>) => void;
@@ -1388,6 +1402,8 @@ declare namespace LocalJSX {
         "readonly"?: DBInputProps["readonly"];
         "required"?: DBInputProps["required"];
         "showIcon"?: DBInputProps["showIcon"];
+        "showIconLeading"?: DBInputProps["showIconLeading"];
+        "showIconTrailing"?: DBInputProps["showIconTrailing"];
         "showLabel"?: DBInputProps["showLabel"];
         "showMessage"?: DBInputProps["showMessage"];
         "showRequiredAsterisk"?: DBInputProps["showRequiredAsterisk"];
@@ -1402,25 +1418,22 @@ declare namespace LocalJSX {
     interface DbLink {
         "className"?: DBLinkProps["className"];
         "content"?: DBLinkProps["content"];
-        "current"?: DBLinkProps["current"];
         "disabled"?: DBLinkProps["disabled"];
         "href"?: DBLinkProps["href"];
         "hreflang"?: DBLinkProps["hreflang"];
         "id"?: DBLinkProps["id"];
-        "label"?: DBLinkProps["label"];
         "rel"?: DBLinkProps["rel"];
         "role"?: DBLinkProps["role"];
-        "selected"?: DBLinkProps["selected"];
         "showIcon"?: DBLinkProps["showIcon"];
         "size"?: DBLinkProps["size"];
         "target"?: DBLinkProps["target"];
         "text"?: DBLinkProps["text"];
         "variant"?: DBLinkProps["variant"];
+        "wrap"?: DBLinkProps["wrap"];
     }
     interface DbNavigation {
         "className"?: DBNavigationProps["className"];
         "id"?: DBNavigationProps["id"];
-        "labelledBy"?: DBNavigationProps["labelledBy"];
     }
     interface DbNavigationItem {
         "active"?: DBNavigationItemProps["active"];
@@ -1476,10 +1489,8 @@ declare namespace LocalJSX {
         "width"?: DBPopoverProps["width"];
     }
     interface DbRadio {
-        "ariaDescribedBy"?: DBRadioProps["ariaDescribedBy"];
         "checked"?: DBRadioProps["checked"];
         "className"?: DBRadioProps["className"];
-        "describedbyid"?: DBRadioProps["describedbyid"];
         "disabled"?: DBRadioProps["disabled"];
         "id"?: DBRadioProps["id"];
         "label"?: DBRadioProps["label"];
@@ -1542,14 +1553,13 @@ declare namespace LocalJSX {
         "wrap"?: DBStackProps["wrap"];
     }
     interface DbSwitch {
-        "ariaDescribedBy"?: DBSwitchProps["ariaDescribedBy"];
         "checked"?: DBSwitchProps["checked"];
         "className"?: DBSwitchProps["className"];
-        "describedbyid"?: DBSwitchProps["describedbyid"];
         "disabled"?: DBSwitchProps["disabled"];
         "emphasis"?: DBSwitchProps["emphasis"];
         "icon"?: DBSwitchProps["icon"];
-        "iconAfter"?: DBSwitchProps["iconAfter"];
+        "iconLeading"?: DBSwitchProps["iconLeading"];
+        "iconTrailing"?: DBSwitchProps["iconTrailing"];
         "id"?: DBSwitchProps["id"];
         "label"?: DBSwitchProps["label"];
         "name"?: DBSwitchProps["name"];
@@ -1568,16 +1578,18 @@ declare namespace LocalJSX {
         "active"?: DBTabItemProps["active"];
         "checked"?: DBTabItemProps["checked"];
         "className"?: DBTabItemProps["className"];
-        "controls"?: DBTabItemProps["controls"];
         "disabled"?: DBTabItemProps["disabled"];
         "icon"?: DBTabItemProps["icon"];
-        "iconAfter"?: DBTabItemProps["iconAfter"];
+        "iconLeading"?: DBTabItemProps["iconLeading"];
+        "iconTrailing"?: DBTabItemProps["iconTrailing"];
         "id"?: DBTabItemProps["id"];
         "label"?: DBTabItemProps["label"];
         "name"?: DBTabItemProps["name"];
         "noText"?: DBTabItemProps["noText"];
         "onChange"?: (event: DbTabItemCustomEvent<any>) => void;
         "showIcon"?: DBTabItemProps["showIcon"];
+        "showIconLeading"?: DBTabItemProps["showIconLeading"];
+        "showIconTrailing"?: DBTabItemProps["showIconTrailing"];
     }
     interface DbTabList {
         "className"?: DBTabListProps["className"];
@@ -1587,7 +1599,6 @@ declare namespace LocalJSX {
         "className"?: DBTabPanelProps["className"];
         "content"?: DBTabPanelProps["content"];
         "id"?: DBTabPanelProps["id"];
-        "labelledBy"?: DBTabPanelProps["labelledBy"];
     }
     interface DbTabs {
         "alignment"?: DBTabsProps["alignment"];
@@ -1607,7 +1618,6 @@ declare namespace LocalJSX {
     interface DbTag {
         "behavior"?: DBTagProps["behavior"];
         "className"?: DBTagProps["className"];
-        "disabled"?: DBTagProps["disabled"];
         "emphasis"?: DBTagProps["emphasis"];
         "icon"?: DBTagProps["icon"];
         "id"?: DBTagProps["id"];

package/dist/types/shared/model.d.ts

@@ -12,11 +12,6 @@ export type GlobalProps = {
      * Workaround for TypeScript using class for all components.
      */
     class?: string | any;
-    /**
-     * @deprecated
-     * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
-     */
-    describedbyid?: string;
     /**
      * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.
      */
@@ -50,11 +45,31 @@ export type ShowIconProps = {
      */
     showIcon?: boolean | string;
 };
-export type IconAfterProps = {
+export type ShowIconLeadingProps = {
+    /**
+     * Enables or disables the visibility of the leading icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconLeading?: boolean | string;
+};
+export type ShowIconTrailingProps = {
+    /**
+     * Enables or disables the visibility of the trailing icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconTrailing?: boolean | string;
+};
+export type IconLeadingProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    iconLeading?: IconTypes;
+};
+export type IconTrailingProps = {
     /**
      * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
      */
-    iconAfter?: IconTypes;
+    iconTrailing?: IconTypes;
 };
 export declare const SpacingList: readonly ["medium", "small", "large", "none"];
 export type SpacingType = (typeof SpacingList)[number];
@@ -107,6 +122,12 @@ export type OverflowProps = {
      */
     overflow?: boolean | string;
 };
+export type WrapProps = {
+    /**
+     * Determines whether the text should wrap when its parent container is too small, preventing overflow.
+     */
+    wrap?: boolean | string;
+};
 export declare const OrientationList: readonly ["horizontal", "vertical"];
 export type OrientationType = (typeof OrientationList)[number];
 export type OrientationProps = {
@@ -345,17 +366,11 @@ export type FormState = {
 export type InitializedState = {
     initialized: boolean;
 };
-export declare const LinkCurrentList: readonly ["time", "true", "false", "date", "page", "step", "location"];
-export type LinkCurrentType = (typeof LinkCurrentList)[number];
 export declare const LinkTargetList: readonly ["_self", "_blank", "_parent", "_top"];
 export type LinkTargetType = (typeof LinkTargetList)[number];
 export declare const LinkReferrerPolicyList: readonly ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"];
 export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
 export type LinkProps = {
-    /**
-     * Sets aria attribute based on [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
-     */
-    current?: boolean | LinkCurrentType;
     /**
      * Disables the link.
      */
@@ -368,10 +383,6 @@ export type LinkProps = {
      * Hints for the human [language of the linked page or document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
      */
     hreflang?: string;
-    /**
-     * Sets aria attribute based on [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
-     */
-    label?: string;
     /**
      * Where to open the linked URL, as the name for a [browsing context](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
      */
@@ -388,10 +399,6 @@ export type LinkProps = {
      * How much of the referrer to send when following the link.
      */
     referrerpolicy?: LinkReferrerPolicyType;
-    /**
-     * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
-     */
-    selected?: boolean | string;
 };
 export type TextProps = {
     /**
@@ -492,12 +499,6 @@ export type NavigationBackButtonProps = {
      */
     backButtonText?: string;
 };
-export type AriaLabelledByProps = {
-    /**
-     * Pass `aria-labelledby` to inner element
-     */
-    labelledBy?: string;
-};
 export type AriaControlsProps = {
     /**
      * Pass `aria-controls` to inner element