@beeq/core 1.11.2 → 1.12.0

package/dist/types/components/step-item/bq-step-item.d.ts

@@ -1,5 +1,5 @@
 import type { EventEmitter } from '../../stencil-public-runtime';
-import type { TStepsSize, TStepsType } from '../steps/bq-steps.types';
+import type { TStepsOrientation, TStepsSize, TStepsType } from '../steps/bq-steps.types';
 import type { TStepItemStatus } from './bq-step-item.types';
 /**
  * The Step Item Component is a UI element used to display a single step or stage in a process or task.
@@ -17,11 +17,15 @@ import type { TStepItemStatus } from './bq-step-item.types';
  * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
  * @status stable
  *
+ * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+ * @attr {"horizontal" | "vertical"} orientation - The orientation of the step item
  * @attr {"small" | "medium"} size - It defines prefix size
  * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
  * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
  *
  * @event bqClick - Callback handler emitted when the step item is clicked
+ * @event bqFocus - Callback handler emitted when the step item is focused
+ * @event bqBlur - Callback handler emitted when the step item loses focus
  *
  * @slot - The step item content
  * @slot prefix - The step item prefix
@@ -40,6 +44,12 @@ import type { TStepItemStatus } from './bq-step-item.types';
  */
 export declare class BqStepItem {
     el: HTMLBqStepItemElement;
+    /** The color of the line that connects the steps. It should be a valid declarative color token. */
+    dividerColor: string;
+    /** @internal It defines if the step item is the last one */
+    isLast?: boolean;
+    /** It defines the orientation of the step item */
+    orientation?: TStepsOrientation;
     /** It defines prefix size */
     size?: TStepsSize;
     /** It defines step item appearance based on its status */
@@ -62,5 +72,5 @@ export declare class BqStepItem {
     private handleIconPrefix;
     private get isDisabled();
     private get isCurrent();
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/steps/bq-steps.d.ts

@@ -1,4 +1,4 @@
-import type { TStepsSize, TStepsType } from './bq-steps.types';
+import type { TStepsOrientation, TStepsSize, TStepsType } from './bq-steps.types';
 /**
  * The Steps Component is a UI element used to display a series of steps or stages in a process or task.
  * It is used to guide users through a process or task and to indicate their progress.
@@ -19,6 +19,7 @@ import type { TStepsSize, TStepsType } from './bq-steps.types';
  * @dependency bq-divider
  *
  * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+ * @attr {"horizontal" | "vertical"} orientation - The orientation of the steps
  * @attr {"medium" | "small"} size - The size of the steps
  * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
  *
@@ -37,6 +38,8 @@ export declare class BqSteps {
     el: HTMLBqStepsElement;
     /** The color of the line that connects the steps. It should be a valid declarative color token. */
     dividerColor: string;
+    /** The orientation of the steps */
+    orientation: TStepsOrientation;
     /** The size of the steps */
     size: TStepsSize;
     /** The type of prefix element to use on the step items */
@@ -50,5 +53,6 @@ export declare class BqSteps {
     setCurrentStepItem(newCurrentStep: HTMLBqStepItemElement): Promise<void>;
     private get bqSteps();
     private setStepItemProps;
-    render(): any;
+    private get lastStepItem();
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/steps/bq-steps.types.d.ts

@@ -2,3 +2,5 @@ export declare const STEPS_TYPE: readonly ["numeric", "icon", "dot"];
 export type TStepsType = (typeof STEPS_TYPE)[number];
 export declare const STEPS_SIZE: readonly ["medium", "small"];
 export type TStepsSize = (typeof STEPS_SIZE)[number];
+export declare const STEPS_ORIENTATION: readonly ["horizontal", "vertical"];
+export type TStepsOrientation = (typeof STEPS_ORIENTATION)[number];

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

@@ -113,5 +113,5 @@ export declare class BqSwitch {
     private handleSlotChange;
     private setFormValue;
     private updateFormValidity;
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

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

@@ -106,5 +106,5 @@ export declare class BqTab {
     private handleOnKeyDown;
     private handleIconSlotChange;
     private get tabindex();
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/tab-group/bq-tab-group.d.ts

@@ -63,5 +63,5 @@ export declare class BqTabGroup {
     private restoreTabsFocus;
     private get bqTabElements();
     private selectTab;
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

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

@@ -106,5 +106,5 @@ export declare class BqTag {
     private get computedHostClasses();
     private get computeWrapperClasses();
     private get computeButtonInteractiveProps();
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/textarea/bq-textarea.d.ts

@@ -185,5 +185,5 @@ export declare class BqTextarea {
     private setFormValue;
     private updateFormValidity;
     private clearSelection;
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/toast/bq-toast.d.ts

@@ -90,5 +90,5 @@ export declare class BqToast {
     private handleShow;
     private handleHide;
     private get iconName();
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components/tooltip/bq-tooltip.d.ts

@@ -97,5 +97,5 @@ export declare class BqTooltip {
     private showTooltip;
     private hideTooltip;
     private get isHidden();
-    render(): any;
+    render(): import("@stencil/core/jsx-runtime").JSX.Element;
 }

package/dist/types/components.d.ts

@@ -27,7 +27,7 @@ import { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-si
 import { TSliderType, TSliderValue } from "./components/slider/bq-slider.types";
 import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 import { TStatusType } from "./components/status/bq-status.types";
-import { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
+import { TStepsOrientation, TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
 import { TStepItemStatus } from "./components/step-item/bq-step-item.types";
 import { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-switch.types";
 import { TTabOrientation, TTabPlacement, TTabSize } from "./components/tab/bq-tab.types";
@@ -56,7 +56,7 @@ export { TSideMenuAppearance, TSideMenuSize } from "./components/side-menu/bq-si
 export { TSliderType, TSliderValue } from "./components/slider/bq-slider.types";
 export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spinner.types";
 export { TStatusType } from "./components/status/bq-status.types";
-export { TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
+export { TStepsOrientation, TStepsSize, TStepsType } from "./components/steps/bq-steps.types";
 export { TStepItemStatus } from "./components/step-item/bq-step-item.types";
 export { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-switch.types";
 export { TTabOrientation, TTabPlacement, TTabSize } from "./components/tab/bq-tab.types";
@@ -511,6 +511,7 @@ export namespace Components {
      * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
      * @attr {"left" | "center" | "right"} justify-content - It determinate how the content should be aligned
      * @attr {boolean} loading - If `true` it will display the button in a loading state
+     * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)
      * @attr {"small" | "medium" | "large"} size - The size of the button
      * @attr {"_blank" | "_parent" | "_self" | "_top"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
      * @attr {"button" | "submit" | "reset"} type - The default behavior of the button
@@ -522,15 +523,12 @@ export namespace Components {
      * @cssprop --bq-button--border-radius - Button border radius
      * @cssprop --bq-button--border-style - Button border style
      * @cssprop --bq-button--border-width - Button border width
-     * @cssprop --bq-button--small-height - Button small height
      * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)
      * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)
      * @cssprop --bq-button--small-font-size - Button small font size
-     * @cssprop --bq-button--medium-height - Button medium height
      * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)
      * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)
      * @cssprop --bq-button--medium-font-size - Button medium font size
-     * @cssprop --bq-button--large-height - Button large height
      * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)
      * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)
      * @cssprop --bq-button--large-font-size - Button large font size
@@ -540,22 +538,22 @@ export namespace Components {
           * The appearance style to apply to the button
           * @default 'primary'
          */
-        "appearance": TButtonAppearance;
+        "appearance"?: TButtonAppearance;
         /**
           * If `true`, it will make the button fit to its parent width.
           * @default false
          */
-        "block": boolean;
+        "block"?: boolean;
         /**
           * The corner radius of the button
           * @default 'm'
          */
-        "border": TButtonBorderRadius;
+        "border"?: TButtonBorderRadius;
         /**
           * If true, the button will be disabled (no interaction allowed)
           * @default false
          */
-        "disabled": boolean;
+        "disabled"?: boolean;
         /**
           * Tells the browser to treat the linked URL as a download. Only used when `href` is set. Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
          */
@@ -563,36 +561,45 @@ export namespace Components {
         /**
           * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
          */
-        "href": string;
+        "href"?: string;
         /**
           * It determinate how the content should be aligned
           * @default 'center'
          */
-        "justifyContent": 'left' | 'center' | 'right';
+        "justifyContent"?: 'left' | 'center' | 'right';
+        /**
+          * Text  used for accessibility purposes, specially screen readers, to describe the button action
+         */
+        "label"?: string;
         /**
           * If `true` it will display the button in a loading state
           * @default false
          */
-        "loading": boolean;
+        "loading"?: boolean;
+        /**
+          * If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes.
+          * @default false
+         */
+        "onlyIcon"?: boolean;
         /**
           * The size of the button
           * @default 'medium'
          */
-        "size": TButtonSize;
+        "size"?: TButtonSize;
         /**
           * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`) Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
          */
-        "target": '_blank' | '_parent' | '_self' | '_top';
+        "target"?: '_blank' | '_parent' | '_self' | '_top';
         /**
           * The default behavior of the button
           * @default 'button'
          */
-        "type": TButtonType;
+        "type"?: TButtonType;
         /**
           * The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)
           * @default 'standard'
          */
-        "variant": TButtonVariant;
+        "variant"?: TButtonVariant;
     }
     /**
      * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.
@@ -802,8 +809,7 @@ export namespace Components {
         "autofocus": boolean;
         /**
           * Clears the selected value.
-          * @return 
-          * @memberof BqInput
+          * @returns
          */
         "clear": () => Promise<void>;
         /**
@@ -2470,10 +2476,14 @@ export namespace Components {
      * ```
      * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
      * @status stable
+     * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the step item
      * @attr {"small" | "medium"} size - It defines prefix size
      * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
      * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
      * @event bqClick - Callback handler emitted when the step item is clicked
+     * @event bqFocus - Callback handler emitted when the step item is focused
+     * @event bqBlur - Callback handler emitted when the step item loses focus
      * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
      * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
      * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
@@ -2482,6 +2492,20 @@ export namespace Components {
      * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number
      */
     interface BqStepItem {
+        /**
+          * The color of the line that connects the steps. It should be a valid declarative color token.
+          * @default 'stroke--primary'
+         */
+        "dividerColor": string;
+        /**
+          * @default false
+         */
+        "isLast"?: boolean;
+        /**
+          * It defines the orientation of the step item
+          * @default 'horizontal'
+         */
+        "orientation"?: TStepsOrientation;
         /**
           * It defines prefix size
           * @default 'medium'
@@ -2513,6 +2537,7 @@ export namespace Components {
      * @status stable
      * @dependency bq-divider
      * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the steps
      * @attr {"medium" | "small"} size - The size of the steps
      * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
      * @cssprop --bq-steps--divider-color - Divider color
@@ -2524,6 +2549,11 @@ export namespace Components {
           * @default 'stroke--primary'
          */
         "dividerColor": string;
+        /**
+          * The orientation of the steps
+          * @default 'horizontal'
+         */
+        "orientation": TStepsOrientation;
         /**
           * Set the current step item.
           * @param newCurrentStep - The step item to set as current.
@@ -3658,6 +3688,7 @@ declare global {
      * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
      * @attr {"left" | "center" | "right"} justify-content - It determinate how the content should be aligned
      * @attr {boolean} loading - If `true` it will display the button in a loading state
+     * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)
      * @attr {"small" | "medium" | "large"} size - The size of the button
      * @attr {"_blank" | "_parent" | "_self" | "_top"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
      * @attr {"button" | "submit" | "reset"} type - The default behavior of the button
@@ -3669,15 +3700,12 @@ declare global {
      * @cssprop --bq-button--border-radius - Button border radius
      * @cssprop --bq-button--border-style - Button border style
      * @cssprop --bq-button--border-width - Button border width
-     * @cssprop --bq-button--small-height - Button small height
      * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)
      * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)
      * @cssprop --bq-button--small-font-size - Button small font size
-     * @cssprop --bq-button--medium-height - Button medium height
      * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)
      * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)
      * @cssprop --bq-button--medium-font-size - Button medium font size
-     * @cssprop --bq-button--large-height - Button large height
      * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)
      * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)
      * @cssprop --bq-button--large-font-size - Button large font size
@@ -4904,10 +4932,14 @@ declare global {
      * ```
      * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
      * @status stable
+     * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the step item
      * @attr {"small" | "medium"} size - It defines prefix size
      * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
      * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
      * @event bqClick - Callback handler emitted when the step item is clicked
+     * @event bqFocus - Callback handler emitted when the step item is focused
+     * @event bqBlur - Callback handler emitted when the step item loses focus
      * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
      * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
      * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
@@ -4945,6 +4977,7 @@ declare global {
      * @status stable
      * @dependency bq-divider
      * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the steps
      * @attr {"medium" | "small"} size - The size of the steps
      * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
      * @cssprop --bq-steps--divider-color - Divider color
@@ -5892,6 +5925,7 @@ declare namespace LocalJSX {
      * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
      * @attr {"left" | "center" | "right"} justify-content - It determinate how the content should be aligned
      * @attr {boolean} loading - If `true` it will display the button in a loading state
+     * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)
      * @attr {"small" | "medium" | "large"} size - The size of the button
      * @attr {"_blank" | "_parent" | "_self" | "_top"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
      * @attr {"button" | "submit" | "reset"} type - The default behavior of the button
@@ -5903,15 +5937,12 @@ declare namespace LocalJSX {
      * @cssprop --bq-button--border-radius - Button border radius
      * @cssprop --bq-button--border-style - Button border style
      * @cssprop --bq-button--border-width - Button border width
-     * @cssprop --bq-button--small-height - Button small height
      * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)
      * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)
      * @cssprop --bq-button--small-font-size - Button small font size
-     * @cssprop --bq-button--medium-height - Button medium height
      * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)
      * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)
      * @cssprop --bq-button--medium-font-size - Button medium font size
-     * @cssprop --bq-button--large-height - Button large height
      * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)
      * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)
      * @cssprop --bq-button--large-font-size - Button large font size
@@ -5941,6 +5972,10 @@ declare namespace LocalJSX {
           * Tells the browser to treat the linked URL as a download. Only used when `href` is set. Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
          */
         "download"?: string;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
          */
@@ -5950,11 +5985,19 @@ declare namespace LocalJSX {
           * @default 'center'
          */
         "justifyContent"?: 'left' | 'center' | 'right';
+        /**
+          * Text  used for accessibility purposes, specially screen readers, to describe the button action
+         */
+        "label"?: string;
         /**
           * If `true` it will display the button in a loading state
           * @default false
          */
         "loading"?: boolean;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
         /**
           * Handler to be called when the button loses focus.
          */
@@ -5967,6 +6010,11 @@ declare namespace LocalJSX {
           * Handler to be called when the button gets focus.
          */
         "onBqFocus"?: (event: BqButtonCustomEvent<HTMLBqButtonElement>) => void;
+        /**
+          * If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes.
+          * @default false
+         */
+        "onlyIcon"?: boolean;
         /**
           * The size of the button
           * @default 'medium'
@@ -6068,6 +6116,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * The form ID that the checkbox is associated with
          */
@@ -7459,6 +7511,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "fieldset"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * Name of the HTML input form control. Submitted with the form as part of a name/value pair.
          */
@@ -7858,6 +7914,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "enableValueIndicator"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * A number representing the amount to remain between the minimum and maximum values (only for range type).
           * @default 0
@@ -7980,10 +8040,14 @@ declare namespace LocalJSX {
      * ```
      * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
      * @status stable
+     * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the step item
      * @attr {"small" | "medium"} size - It defines prefix size
      * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
      * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
      * @event bqClick - Callback handler emitted when the step item is clicked
+     * @event bqFocus - Callback handler emitted when the step item is focused
+     * @event bqBlur - Callback handler emitted when the step item loses focus
      * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
      * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
      * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
@@ -7992,6 +8056,11 @@ declare namespace LocalJSX {
      * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number
      */
     interface BqStepItem {
+        /**
+          * The color of the line that connects the steps. It should be a valid declarative color token.
+          * @default 'stroke--primary'
+         */
+        "dividerColor"?: string;
         /**
           * Callback handler triggered when the step item loses focus
          */
@@ -8004,6 +8073,11 @@ declare namespace LocalJSX {
           * Callback handler triggered when the step item is focused
          */
         "onBqFocus"?: (event: BqStepItemCustomEvent<HTMLBqStepItemElement>) => void;
+        /**
+          * It defines the orientation of the step item
+          * @default 'horizontal'
+         */
+        "orientation"?: TStepsOrientation;
         /**
           * It defines prefix size
           * @default 'medium'
@@ -8035,6 +8109,7 @@ declare namespace LocalJSX {
      * @status stable
      * @dependency bq-divider
      * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+     * @attr {"horizontal" | "vertical"} orientation - The orientation of the steps
      * @attr {"medium" | "small"} size - The size of the steps
      * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
      * @cssprop --bq-steps--divider-color - Divider color
@@ -8046,6 +8121,11 @@ declare namespace LocalJSX {
           * @default 'stroke--primary'
          */
         "dividerColor"?: string;
+        /**
+          * The orientation of the steps
+          * @default 'horizontal'
+         */
+        "orientation"?: TStepsOrientation;
         /**
           * The size of the steps
           * @default 'medium'
@@ -8103,6 +8183,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
           * The native form validation message
          */
@@ -9073,6 +9157,7 @@ declare module "@stencil/core" {
              * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`
              * @attr {"left" | "center" | "right"} justify-content - It determinate how the content should be aligned
              * @attr {boolean} loading - If `true` it will display the button in a loading state
+             * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)
              * @attr {"small" | "medium" | "large"} size - The size of the button
              * @attr {"_blank" | "_parent" | "_self" | "_top"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
              * @attr {"button" | "submit" | "reset"} type - The default behavior of the button
@@ -9084,15 +9169,12 @@ declare module "@stencil/core" {
              * @cssprop --bq-button--border-radius - Button border radius
              * @cssprop --bq-button--border-style - Button border style
              * @cssprop --bq-button--border-width - Button border width
-             * @cssprop --bq-button--small-height - Button small height
              * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)
              * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)
              * @cssprop --bq-button--small-font-size - Button small font size
-             * @cssprop --bq-button--medium-height - Button medium height
              * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)
              * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)
              * @cssprop --bq-button--medium-font-size - Button medium font size
-             * @cssprop --bq-button--large-height - Button large height
              * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)
              * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)
              * @cssprop --bq-button--large-font-size - Button large font size
@@ -9965,10 +10047,14 @@ declare module "@stencil/core" {
              * ```
              * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
              * @status stable
+             * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+             * @attr {"horizontal" | "vertical"} orientation - The orientation of the step item
              * @attr {"small" | "medium"} size - It defines prefix size
              * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
              * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
              * @event bqClick - Callback handler emitted when the step item is clicked
+             * @event bqFocus - Callback handler emitted when the step item is focused
+             * @event bqBlur - Callback handler emitted when the step item loses focus
              * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
              * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
              * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
@@ -9993,6 +10079,7 @@ declare module "@stencil/core" {
              * @status stable
              * @dependency bq-divider
              * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+             * @attr {"horizontal" | "vertical"} orientation - The orientation of the steps
              * @attr {"medium" | "small"} size - The size of the steps
              * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
              * @cssprop --bq-steps--divider-color - Divider color

package/dist/types/shared/utils/date/dateFormatting.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Formats a date value for display based on the picker type and locale.
+ *
+ * @param value - The ISO date string(s) to format
+ * @param type - The picker type (single, multi, range)
+ * @param locale - The locale for formatting
+ * @param formatOptions - Intl.DateTimeFormat options
+ * @returns Formatted display string or undefined
+ */
+declare const formatDisplayValue: (value: string, type: "single" | "multi" | "range", locale: Intl.LocalesArgument, formatOptions: Intl.DateTimeFormatOptions) => string | undefined;
+/**
+ * Extracts and returns the first date part from a given string. Handles single, multi, and range picker types.
+ * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value
+ * should be the focused date in the calendar.
+ *
+ * @param value - The date value string
+ * @returns The first ISO date string or undefined
+ */
+declare const extractFocusedDate: (value: string) => string | undefined;
+/**
+ * Clamps a date string to a min/max range.
+ *
+ * @param dateStr - The ISO date string to clamp
+ * @param min - Optional minimum date
+ * @param max - Optional maximum date
+ * @returns The clamped date string
+ */
+declare const clampDateToRange: (dateStr: string, min?: string, max?: string) => string;
+export { formatDisplayValue, extractFocusedDate, clampDateToRange };

package/dist/types/shared/utils/{date.d.ts → date/dateParsing.d.ts}

@@ -1,3 +1,5 @@
+/** French Canadian locale used for ISO date formatting (YYYY-MM-DD) */
+declare const ISO_DATE_LOCALE = "fr-CA";
 /**
  * Parses various date input formats and returns a Date object
  * Supports:
@@ -9,10 +11,22 @@
  * @param {Intl.LocalesArgument} locale - The locale for month name recognition (defaults to 'en-GB')
  * @returns {Date | null} Parsed Date object or null if parsing fails
  */
-export declare const parseDateInput: (inputValue: string, locale?: Intl.LocalesArgument) => Date | null;
+declare const parseDateInput: (inputValue: string, locale?: Intl.LocalesArgument) => Date | null;
 /**
  * Validates if a string is in ISO date format (YYYY-MM-DD) with actual valid date values
  * @param {string} dateStr - The date string to validate
  * @returns {boolean} True if the date string is valid in ISO format and represents an actual valid date
  */
-export declare const isValidISODate: (dateStr: string) => boolean;
+declare const isValidISODate: (dateStr: string) => boolean;
+/**
+ * Converts a Date object to ISO format string (YYYY-MM-DD).
+ * @param date - The date to convert
+ * @returns ISO formatted date string
+ */
+declare const toISODateString: (date: Date) => string;
+/**
+ * Gets today's date in ISO format.
+ * @returns Today's date as YYYY-MM-DD string
+ */
+declare const getTodayISO: () => string;
+export { parseDateInput, isValidISODate, toISODateString, getTodayISO, ISO_DATE_LOCALE };

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

@@ -0,0 +1,2 @@
+export * from './dateFormatting';
+export * from './dateParsing';