@db-ux/wc-core-components 1.0.0 → 1.1.0

package/dist/esm/{navigation-9fec9921.js.map → navigation-09e3ace3.js.map}

@@ -1 +1 @@
-{"file":"navigation-9fec9921.js","mappings":"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","names":[],"sources":["src/utils/navigation.ts"],"sourcesContent":["import { handleDataOutside } from './index';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = (event as {\n    target: HTMLElement;\n  });\n  return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: Element | null;\n  private readonly parentSubNavigation: Element | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: Element | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-sub-navigation');\n\n    /*\n     * only initiate if:\n     * 1. item is not at root navigation level\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(variant: 'safe-triangle' | 'fill-gap'): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    if (variant === 'fill-gap') {\n      const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;\n      const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;\n      return {\n        lb: `${xStart} ${itemHeight}`,\n        lt: `${xStart} 0`,\n        rt: '100% 0',\n        rb: `100% ${itemHeight}`\n      };\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: MouseEvent) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport default {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle\n}"],"version":3}
+{"file":"navigation-09e3ace3.js","mappings":"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","names":[],"sources":["src/utils/navigation.ts"],"sourcesContent":["import { handleDataOutside } from './index';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = (event as {\n    target: HTMLElement;\n  });\n  return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: Element | null;\n  private readonly parentSubNavigation: Element | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: Element | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-sub-navigation');\n\n    /*\n     * only initiate if:\n     * 1. item is not at root navigation level\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(variant: 'safe-triangle' | 'fill-gap'): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    if (variant === 'fill-gap') {\n      const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;\n      const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;\n      return {\n        lb: `${xStart} ${itemHeight}`,\n        lt: `${xStart} 0`,\n        rt: '100% 0',\n        rb: `100% ${itemHeight}`\n      };\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: MouseEvent) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport default {\n  isEventTargetNavigationItem,\n  NavigationItemSafeTriangle\n}"],"version":3}

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

@@ -9,8 +9,8 @@ export declare class DBCheckbox {
     id: DBCheckboxProps["id"];
     message: DBCheckboxProps["message"];
     showMessage: DBCheckboxProps["showMessage"];
-    checked: DBCheckboxProps["checked"];
     indeterminate: DBCheckboxProps["indeterminate"];
+    checked: DBCheckboxProps["checked"];
     onChange: any;
     change: DBCheckboxProps["change"];
     validation: DBCheckboxProps["validation"];

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

@@ -42,6 +42,7 @@ export declare class DBInput {
     min: DBInputProps["min"];
     readOnly: DBInputProps["readOnly"];
     form: DBInputProps["form"];
+    size: DBInputProps["size"];
     autocomplete: DBInputProps["autocomplete"];
     autofocus: DBInputProps["autofocus"];
     dataList: DBInputProps["dataList"];

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {
@@ -31,7 +31,7 @@ export type DBInputDefaultProps = {
      */
     step?: number | string;
 };
-export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps;
+export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;
 export type DBInputDefaultState = {
     _dataListId?: string;
     getDataList: (_list?: string[] | ValueLabelType[]) => ValueLabelType[];

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
      * The description attribute will add a paragraph below the select.
@@ -35,7 +35,7 @@ export type DBSelectOptionType = {
      */
     value: string | string[] | number;
 };
-export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;
+export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps & FormSizeProps;
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;

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

@@ -31,6 +31,7 @@ export declare class DBSelect {
     label: DBSelectProps["label"];
     disabled: DBSelectProps["disabled"];
     name: DBSelectProps["name"];
+    size: DBSelectProps["size"];
     autocomplete: DBSelectProps["autocomplete"];
     options: DBSelectProps["options"];
     placeholder: DBSelectProps["placeholder"];

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, SizeProps } from '../../shared/model';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.
@@ -9,4 +9,4 @@ export type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProp
 export type DBSwitchDefaultState = {
     _checked: boolean;
 };
-export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;

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

@@ -7,6 +7,7 @@ import { ChangeEvent, InteractionEvent } from "../../shared/model";
 export declare class DBSwitch {
     private _ref;
     id: DBSwitchProps["id"];
+    checked: DBSwitchProps["checked"];
     onChange: any;
     change: DBSwitchProps["change"];
     onBlur: any;
@@ -18,7 +19,7 @@ export declare class DBSwitch {
     showLabel: DBSwitchProps["showLabel"];
     emphasis: DBSwitchProps["emphasis"];
     className: DBSwitchProps["className"];
-    checked: DBSwitchProps["checked"];
+    value: DBSwitchProps["value"];
     disabled: DBSwitchProps["disabled"];
     describedbyid: DBSwitchProps["describedbyid"];
     validation: DBSwitchProps["validation"];
@@ -29,7 +30,6 @@ export declare class DBSwitch {
     label: DBSwitchProps["label"];
     _id: any;
     _checked: boolean;
-    initialized: boolean;
     handleChange(event: ChangeEvent<HTMLInputElement>): void;
     handleBlur(event: InteractionEvent<HTMLInputElement>): void;
     handleFocus(event: InteractionEvent<HTMLInputElement>): void;
@@ -40,5 +40,6 @@ export declare class DBSwitch {
      */
     private enableAttributePassing;
     componentDidLoad(): void;
+    componentDidUpdate(): void;
     render(): any;
 }

package/dist/types/components/tab-item/tab-item.d.ts

@@ -1,5 +1,4 @@
 import type { DBTabItemProps } from "./model";
-import { ChangeEvent } from "../../shared/model";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -21,7 +20,7 @@ export declare class DBTabItem {
     label: DBTabItemProps["label"];
     initialized: boolean;
     _selected: boolean;
-    handleChange(event: ChangeEvent<HTMLInputElement>): void;
+    handleChange(event: any): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

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

@@ -27,6 +27,14 @@ export type DBTabsDefaultProps = {
      * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
      */
     name?: string;
+    /**
+     * Informs the user if the current tab index has changed.
+     */
+    onIndexChange?: (index?: number) => void;
+    /**
+     * Informs the user if another tab has been selected.
+     */
+    onTabSelect?: (event?: Event) => void;
     /**
      * Provide simple tabs with label + text as content
      */
@@ -43,5 +51,6 @@ export type DBTabsDefaultState = {
     convertTabs: (tabs?: unknown[] | string | undefined) => DBSimpleTabProps[];
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
+    handleChange: (event: any) => void;
 };
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

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

@@ -12,6 +12,8 @@ export declare class DBTabs {
     behavior: DBTabsProps["behavior"];
     initialSelectedMode: DBTabsProps["initialSelectedMode"];
     initialSelectedIndex: DBTabsProps["initialSelectedIndex"];
+    onIndexChange: any;
+    onTabSelect: any;
     className: DBTabsProps["className"];
     alignment: DBTabsProps["alignment"];
     width: DBTabsProps["width"];
@@ -27,6 +29,7 @@ export declare class DBTabs {
     scroll(left?: boolean): void;
     initTabList(): void;
     initTabs(init?: boolean): void;
+    handleChange(event: any): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components.d.ts

@@ -229,6 +229,7 @@ export namespace Components {
         "showIcon": DBInputProps["showIcon"];
         "showLabel": DBInputProps["showLabel"];
         "showMessage": DBInputProps["showMessage"];
+        "size": DBInputProps["size"];
         "step": DBInputProps["step"];
         "type": DBInputProps["type"];
         "validMessage": DBInputProps["validMessage"];
@@ -352,6 +353,7 @@ export namespace Components {
         "showIcon": DBSelectProps["showIcon"];
         "showLabel": DBSelectProps["showLabel"];
         "showMessage": DBSelectProps["showMessage"];
+        "size": DBSelectProps["size"];
         "validMessage": DBSelectProps["validMessage"];
         "validation": DBSelectProps["validation"];
         "value": DBSelectProps["value"];
@@ -385,6 +387,7 @@ export namespace Components {
         "showLabel": DBSwitchProps["showLabel"];
         "size": DBSwitchProps["size"];
         "validation": DBSwitchProps["validation"];
+        "value": DBSwitchProps["value"];
         "visualAid": DBSwitchProps["visualAid"];
     }
     interface DbTabItem {
@@ -538,6 +541,10 @@ export interface DbTabItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbTabItemElement;
 }
+export interface DbTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDbTabsElement;
+}
 export interface DbTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDbTagElement;
@@ -876,7 +883,19 @@ declare global {
         prototype: HTMLDbTabPanelElement;
         new (): HTMLDbTabPanelElement;
     };
+    interface HTMLDbTabsElementEventMap {
+        "onIndexChange": any;
+        "onTabSelect": any;
+    }
     interface HTMLDbTabsElement extends Components.DbTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDbTabsElementEventMap>(type: K, listener: (this: HTMLDbTabsElement, ev: DbTabsCustomEvent<HTMLDbTabsElementEventMap[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 HTMLDbTabsElementEventMap>(type: K, listener: (this: HTMLDbTabsElement, ev: DbTabsCustomEvent<HTMLDbTabsElementEventMap[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 HTMLDbTabsElement: {
         prototype: HTMLDbTabsElement;
@@ -1133,6 +1152,7 @@ declare namespace LocalJSX {
         "showIcon"?: DBInputProps["showIcon"];
         "showLabel"?: DBInputProps["showLabel"];
         "showMessage"?: DBInputProps["showMessage"];
+        "size"?: DBInputProps["size"];
         "step"?: DBInputProps["step"];
         "type"?: DBInputProps["type"];
         "validMessage"?: DBInputProps["validMessage"];
@@ -1267,6 +1287,7 @@ declare namespace LocalJSX {
         "showIcon"?: DBSelectProps["showIcon"];
         "showLabel"?: DBSelectProps["showLabel"];
         "showMessage"?: DBSelectProps["showMessage"];
+        "size"?: DBSelectProps["size"];
         "validMessage"?: DBSelectProps["validMessage"];
         "validation"?: DBSelectProps["validation"];
         "value"?: DBSelectProps["value"];
@@ -1303,6 +1324,7 @@ declare namespace LocalJSX {
         "showLabel"?: DBSwitchProps["showLabel"];
         "size"?: DBSwitchProps["size"];
         "validation"?: DBSwitchProps["validation"];
+        "value"?: DBSwitchProps["value"];
         "visualAid"?: DBSwitchProps["visualAid"];
     }
     interface DbTabItem {
@@ -1339,6 +1361,8 @@ declare namespace LocalJSX {
         "initialSelectedIndex"?: DBTabsProps["initialSelectedIndex"];
         "initialSelectedMode"?: DBTabsProps["initialSelectedMode"];
         "name"?: DBTabsProps["name"];
+        "onOnIndexChange"?: (event: DbTabsCustomEvent<any>) => void;
+        "onOnTabSelect"?: (event: DbTabsCustomEvent<any>) => void;
         "orientation"?: DBTabsProps["orientation"];
         "tabs"?: DBTabsProps["tabs"];
         "width"?: DBTabsProps["width"];

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

@@ -227,6 +227,12 @@ export type FormTextProps = {
      */
     readOnly?: boolean;
 };
+export type FormSizeProps = {
+    /**
+     * Size of the control
+     */
+    size?: number;
+};
 export type FormCheckProps = {
     /**
      * Define the radio or checkbox elements checked state

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

@@ -7,8 +7,6 @@ export type ClassNameArg = string | {
     [key: string]: boolean | undefined;
 } | undefined;
 export declare const cls: (...args: ClassNameArg[]) => string;
-export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
-export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
 export declare const visibleInVX: (el: Element) => boolean;
 export declare const visibleInVY: (el: Element) => boolean;
 export declare const isInView: (el: Element) => {
@@ -34,8 +32,6 @@ export declare const getBooleanAsString: (originBool?: boolean) => any;
 export declare const getHideProp: (show?: boolean) => any;
 export declare const stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
 declare const _default: {
-    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
-    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
     cls: (...args: ClassNameArg[]) => string;
     addAttributeToChildren: (element: Element, attribute: {
         key: string;

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

@@ -0,0 +1,7 @@
+export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+declare const _default: {
+    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+};
+export default _default;

package/dist/vscode.html-custom-data.json

@@ -411,13 +411,13 @@
           "values": []
         },
         {
-          "name": "checked",
-          "description": "Define the radio or checkbox elements checked state",
+          "name": "indeterminate",
+          "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
           "values": []
         },
         {
-          "name": "indeterminate",
-          "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
+          "name": "checked",
+          "description": "Define the radio or checkbox elements checked state",
           "values": []
         },
         { "name": "change", "values": [{ "name": "functiontype" }] },
@@ -853,6 +853,7 @@
           "description": "Associates the control with a form element",
           "values": []
         },
+        { "name": "size", "description": "Size of the control", "values": [] },
         {
           "name": "autocomplete",
           "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -1265,6 +1266,7 @@
           "description": "The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.",
           "values": []
         },
+        { "name": "size", "description": "Size of the control", "values": [] },
         {
           "name": "autocomplete",
           "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -1355,6 +1357,11 @@
           "description": "[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.",
           "values": []
         },
+        {
+          "name": "checked",
+          "description": "Define the radio or checkbox elements checked state",
+          "values": []
+        },
         { "name": "change", "values": [{ "name": "functiontype" }] },
         { "name": "blur", "values": [{ "name": "functiontype" }] },
         { "name": "focus", "values": [{ "name": "functiontype" }] },
@@ -1384,8 +1391,8 @@
           "values": []
         },
         {
-          "name": "checked",
-          "description": "Define the radio or checkbox elements checked state",
+          "name": "value",
+          "description": "The value property is to receive results from the native form element.",
           "values": []
         },
         {
@@ -2113,7 +2120,7 @@
     },
     {
       "name": "db-tabs",
-      "description": "\n---\n\n\n### **Slots:**\n - **children** - default slot",
+      "description": "\n---\n\n\n### **Events:**\n - **onIndexChange**\n- **onTabSelect**\n\n### **Slots:**\n - **children** - default slot",
       "attributes": [
         {
           "name": "id",

package/dist/web-types.json

@@ -730,13 +730,13 @@
               "value": { "type": "boolean" }
             },
             {
-              "name": "checked",
-              "description": "Define the radio or checkbox elements checked state",
+              "name": "indeterminate",
+              "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
               "value": { "type": "boolean" }
             },
             {
-              "name": "indeterminate",
-              "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
+              "name": "checked",
+              "description": "Define the radio or checkbox elements checked state",
               "value": { "type": "boolean" }
             },
             { "name": "change", "value": { "type": "functiontype" } },
@@ -827,13 +827,13 @@
                 "type": "boolean"
               },
               {
-                "name": "checked",
-                "description": "Define the radio or checkbox elements checked state",
+                "name": "indeterminate",
+                "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
                 "type": "boolean"
               },
               {
-                "name": "indeterminate",
-                "description": "Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox",
+                "name": "checked",
+                "description": "Define the radio or checkbox elements checked state",
                 "type": "boolean"
               },
               { "name": "change", "type": "functiontype" },
@@ -1442,6 +1442,11 @@
               "description": "Associates the control with a form element",
               "value": { "type": "string" }
             },
+            {
+              "name": "size",
+              "description": "Size of the control",
+              "value": { "type": "number" }
+            },
             {
               "name": "autocomplete",
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -1618,6 +1623,11 @@
                 "description": "Associates the control with a form element",
                 "type": "string"
               },
+              {
+                "name": "size",
+                "description": "Size of the control",
+                "type": "number"
+              },
               {
                 "name": "autocomplete",
                 "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -2198,6 +2208,11 @@
               "description": "The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.",
               "value": { "type": "string" }
             },
+            {
+              "name": "size",
+              "description": "Size of the control",
+              "value": { "type": "number" }
+            },
             {
               "name": "autocomplete",
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -2315,6 +2330,11 @@
                 "description": "The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.",
                 "type": "string"
               },
+              {
+                "name": "size",
+                "description": "Size of the control",
+                "type": "number"
+              },
               {
                 "name": "autocomplete",
                 "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete",
@@ -2364,6 +2384,11 @@
               "description": "[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.",
               "value": { "type": "string" }
             },
+            {
+              "name": "checked",
+              "description": "Define the radio or checkbox elements checked state",
+              "value": { "type": "boolean" }
+            },
             { "name": "change", "value": { "type": "functiontype" } },
             { "name": "blur", "value": { "type": "functiontype" } },
             { "name": "focus", "value": { "type": "functiontype" } },
@@ -2393,9 +2418,9 @@
               "value": { "type": "string" }
             },
             {
-              "name": "checked",
-              "description": "Define the radio or checkbox elements checked state",
-              "value": { "type": "boolean" }
+              "name": "value",
+              "description": "The value property is to receive results from the native form element.",
+              "value": { "type": "any" }
             },
             {
               "name": "disabled",
@@ -2451,6 +2476,11 @@
                 "description": "[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.",
                 "type": "string"
               },
+              {
+                "name": "checked",
+                "description": "Define the radio or checkbox elements checked state",
+                "type": "boolean"
+              },
               { "name": "change", "type": "functiontype" },
               { "name": "blur", "type": "functiontype" },
               { "name": "focus", "type": "functiontype" },
@@ -2480,9 +2510,9 @@
                 "type": "string"
               },
               {
-                "name": "checked",
-                "description": "Define the radio or checkbox elements checked state",
-                "type": "boolean"
+                "name": "value",
+                "description": "The value property is to receive results from the native form element.",
+                "type": "any"
               },
               {
                 "name": "disabled",
@@ -2525,8 +2555,7 @@
                 "type": "string"
               },
               { "name": "_id" },
-              { "name": "_checked", "type": "boolean" },
-              { "name": "initialized", "type": "boolean" }
+              { "name": "_checked", "type": "boolean" }
             ],
             "events": [
               { "name": "onChange", "type": "any" },
@@ -3757,7 +3786,7 @@
         },
         {
           "name": "db-tabs",
-          "description": "\n---\n\n\n### **Slots:**\n - **children** - default slot",
+          "description": "\n---\n\n\n### **Events:**\n - **onIndexChange**\n- **onTabSelect**\n\n### **Slots:**\n - **children** - default slot",
           "doc-url": "https://db-ux-design-system.github.io/core-web/review/main/components/tabs/properties",
           "attributes": [
             {
@@ -3817,7 +3846,10 @@
             }
           ],
           "slots": [{ "name": "children", "description": "default slot" }],
-          "events": [],
+          "events": [
+            { "name": "onIndexChange", "type": "any" },
+            { "name": "onTabSelect", "type": "any" }
+          ],
           "js": {
             "properties": [
               {
@@ -3882,7 +3914,10 @@
               { "name": "showScrollRight", "type": "boolean" },
               { "name": "scrollContainer", "type": "null" }
             ],
-            "events": []
+            "events": [
+              { "name": "onIndexChange", "type": "any" },
+              { "name": "onTabSelect", "type": "any" }
+            ]
           }
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/wc-core-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Stencil components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   },
   "web-types": "./dist/web-types.json",
   "dependencies": {
-    "@db-ux/core-components": "1.0.0",
-    "@db-ux/core-foundations": "1.0.0"
+    "@db-ux/core-components": "1.1.0",
+    "@db-ux/core-foundations": "1.1.0"
   }
 }

package/dist/cjs/index-c0df827d.js.map

@@ -1 +0,0 @@
-{"file":"index-c0df827d.js","mappings":"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","names":[],"sources":["src/utils/index.ts"],"sourcesContent":["export const uuid = () => {\n  if (typeof window !== 'undefined') {\n    if (window.crypto?.randomUUID) {\n      return window.crypto.randomUUID();\n    } else if (window.crypto?.getRandomValues) {\n      return window.crypto.getRandomValues(new Uint32Array(3)).join('-');\n    }\n  }\n  return Math.random().toString().substring(2);\n};\nexport const addAttributeToChildren = (element: Element, attribute: {\n  key: string;\n  value: string;\n}) => {\n  const children = element.children;\n  Object.values(children).forEach((child: Element) => {\n    child.setAttribute(attribute.key, attribute.value);\n    if (child.children.length > 0) {\n      addAttributeToChildren(child, attribute);\n    }\n  });\n};\nexport type ClassNameArg = string | {\n  [key: string]: boolean | undefined;\n} | undefined;\nexport const cls = (...args: ClassNameArg[]) => {\n  let result = '';\n  for (const arg of args) {\n    if (arg) {\n      if (typeof arg === 'string') {\n        result += `${arg} `;\n      } else {\n        for (const key in arg) {\n          if (arg[key]) {\n            result += `${key} `;\n          }\n        }\n      }\n    }\n  }\n  return result.trim();\n};\nconst reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'autoFocus', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color'];\nexport const filterPassingProps = (props: Record<string, unknown>, propsPassingFilter: string[]): Record<string, unknown> => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj: Record<string, unknown>, key: string) => {\n  return {\n    ...obj,\n    [key]: props[key]\n  };\n}, {});\nexport const getRootProps = (props: Record<string, unknown>, rooProps: string[]): Record<string, unknown> => {\n  return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj: Record<string, unknown>, key: string) => {\n    return {\n      ...obj,\n      [key]: props[key]\n    };\n  }, {});\n};\nexport const visibleInVX = (el: Element) => {\n  const {\n    left,\n    right\n  } = el.getBoundingClientRect();\n  const {\n    innerWidth\n  } = window;\n  return left >= 0 && right <= innerWidth;\n};\nexport const visibleInVY = (el: Element) => {\n  const {\n    top,\n    bottom\n  } = el.getBoundingClientRect();\n  const {\n    innerHeight\n  } = window;\n  return top >= 0 && bottom <= innerHeight;\n};\nexport const isInView = (el: Element) => {\n  const {\n    top,\n    bottom,\n    left,\n    right\n  } = el.getBoundingClientRect();\n  const {\n    innerHeight,\n    innerWidth\n  } = window;\n  let outTop = top < 0;\n  let outBottom = bottom > innerHeight;\n  let outLeft = left < 0;\n  let outRight = right > innerWidth;\n\n  // We need to check if it was already outside\n  const outsideY = el.hasAttribute('data-outside-vy');\n  const outsideX = el.hasAttribute('data-outside-vx');\n  const parentRect = el?.parentElement?.getBoundingClientRect();\n  if (parentRect) {\n    if (outsideY) {\n      const position = el.getAttribute('data-outside-vy');\n      if (position === 'top') {\n        outTop = parentRect.top - (bottom - parentRect.bottom) < 0;\n      } else {\n        outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;\n      }\n    }\n    if (outsideX) {\n      const position = el.getAttribute('data-outside-vx');\n      if (position === 'left') {\n        outLeft = parentRect.left - (right - parentRect.right) < 0;\n      } else {\n        outRight = parentRect.right + (parentRect.left - left) > innerWidth;\n      }\n    }\n  }\n  return {\n    outTop,\n    outBottom,\n    outLeft,\n    outRight\n  };\n};\nexport interface DBDataOutsidePair {\n  vx?: 'left' | 'right';\n  vy?: 'top' | 'bottom';\n}\nexport const handleDataOutside = (el: Element): DBDataOutsidePair => {\n  const {\n    outTop,\n    outBottom,\n    outLeft,\n    outRight\n  } = isInView(el);\n  let dataOutsidePair: DBDataOutsidePair = {};\n  if (outTop || outBottom) {\n    dataOutsidePair = {\n      vy: outTop ? 'top' : 'bottom'\n    };\n    el.setAttribute('data-outside-vy', dataOutsidePair.vy!);\n  } else {\n    el.removeAttribute('data-outside-vy');\n  }\n  if (outLeft || outRight) {\n    dataOutsidePair = {\n      ...dataOutsidePair,\n      vx: outRight ? 'right' : 'left'\n    };\n    el.setAttribute('data-outside-vx', dataOutsidePair.vx!);\n  } else {\n    el.removeAttribute('data-outside-vx');\n  }\n  return dataOutsidePair;\n};\nexport const isArrayOfStrings = (value: unknown): value is string[] => Array.isArray(value) && value.every(item => typeof item === 'string');\nconst appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];\nexport const hasVoiceOver = (): boolean => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));\nexport const delay = (fn: () => void, ms: number) => new Promise(() => setTimeout(fn, ms));\n\n/**\n * Some frameworks like stencil would not add \"true\" as value for a prop\n * if it is used in a framework like angular e.g.: [disabled]=\"myDisabledProp\"\n * @param originBool Some boolean to convert to string\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const getBooleanAsString = (originBool?: boolean): any => {\n  if (originBool) {\n    return String(originBool);\n  }\n  return originBool;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const getHideProp = (show?: boolean): any => {\n  if (show === undefined || show === null) {\n    return undefined;\n  }\n  return getBooleanAsString(!show);\n};\nexport const stringPropVisible = (givenString?: string, showString?: boolean) => {\n  if (showString === undefined) {\n    return !!givenString;\n  } else {\n    return showString && givenString;\n  }\n};\nexport default {\n  getRootProps,\n  filterPassingProps,\n  cls,\n  addAttributeToChildren,\n  uuid,\n  visibleInVX,\n  visibleInVY,\n  isInView,\n  handleDataOutside,\n  isArrayOfStrings,\n  hasVoiceOver,\n  delay,\n  getBooleanAsString,\n  getHideProp,\n  stringPropVisible\n}"],"version":3}