@beeq/core 1.8.0-beta.1 → 1.8.0-beta.11

package/dist/stencil.config.js

@@ -23,6 +23,9 @@ export const config = {
     taskQueue: 'async',
     buildDist: true,
     enableCache: true,
+    env: {
+        BEEQ_ASSETS_BASE_PATH: process.env.BEEQ_ASSETS_BASE_PATH,
+    },
     globalScript: resolve(__dirname, './src/global/scripts/global.ts').replace(/\\/g, '/'),
     globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\/g, '/'),
     plugins: [
@@ -77,16 +80,20 @@ export const config = {
             customElementsDir,
         }),
         react({
-            componentCorePackage,
-            proxiesFile: resolve(__dirname, '../beeq-react/src/components.ts').replace(/\\/g, '/'),
-            includeImportCustomElements: true,
+            outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\/g, '/'),
+            customElementsDir,
+        }),
+        react({
+            outDir: resolve(__dirname, '../beeq-react/ssr').replace(/\\/g, '/'),
+            hydrateModule: '@beeq/core/dist/hydrate',
             customElementsDir,
         }),
         vue({
             componentCorePackage,
             proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\/g, '/'),
             componentModels: vueComponentModels,
-            includeImportCustomElements: true,
+            includeDefineCustomElements: true,
+            hydrateModule: '@beeq/core/dist/hydrate',
             customElementsDir,
         }),
     ],

package/dist/stencil.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget as react } from '@stencil/react-output-target';\nimport { sass } from '@stencil/sass';\nimport { vueOutputTarget as vue } from '@stencil/vue-output-target';\nimport tailwind, { PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\nimport tailwindConf from '../../tailwind.config';\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolve(__dirname, '../../postcss.config.js').replace(/\\\\/g, '/'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  globalScript: resolve(__dirname, './src/global/scripts/global.ts').replace(/\\\\/g, '/'),\n  globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\\\/g, '/'),\n  plugins: [\n    sass({\n      includePaths: [\n        resolve(__dirname, '../../node_modules').replace(/\\\\/g, '/'),\n        resolve(__dirname, 'src/global/styles').replace(/\\\\/g, '/'),\n      ],\n      injectGlobalPaths: [resolve(__dirname, 'src/global/styles/mixins/index.scss').replace(/\\\\/g, '/')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    { type: 'docs-vscode', file: 'custom-elements.json' },\n    { type: 'dist', copy: [{ src: '../README.md' }] },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      dir: customElementsDir,\n      minify: true,\n    },\n    {\n      type: 'www',\n      copy: [\n        { src: 'global/assets', dest: 'assets' },\n        { src: 'global/scripts', dest: 'scripts' },\n      ],\n      serviceWorker: null, // disable service workers\n    },\n    angular({\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/src/directives/components.ts').replace(/\\\\/g, '/'),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    angular({\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/components.ts').replace(\n        /\\\\/g,\n        '/',\n      ),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-react/src/components.ts').replace(/\\\\/g, '/'),\n      includeImportCustomElements: true,\n      customElementsDir,\n    }),\n    vue({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\\\/g, '/'),\n      componentModels: vueComponentModels,\n      includeImportCustomElements: true,\n      customElementsDir,\n    }),\n  ],\n  extras: {\n    /**\n     * Details:\n     * https://stenciljs.com/docs/config-extras\n     */\n    enableImportInjection: true,\n    experimentalScopedSlotChanges: true,\n    experimentalSlotFixes: true,\n  },\n  preamble: 'Built by Endavans\\n© https://beeq.design - Apache 2 License.',\n  watchIgnoredRegex: /(custom-elements\\.)((d\\.ts)|(json))$/g,\n  devServer: {\n    openBrowser: false,\n    port: 8001,\n    reloadStrategy: 'pageReload',\n  },\n};\n"]}
+{"version":3,"file":"stencil.config.js","sourceRoot":"","sources":["../../../stencil.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { resolve } from 'path';\n\nimport { angularOutputTarget as angular } from '@stencil/angular-output-target';\nimport { Config } from '@stencil/core';\nimport { reactOutputTarget as react } from '@stencil/react-output-target';\nimport { sass } from '@stencil/sass';\nimport { vueOutputTarget as vue } from '@stencil/vue-output-target';\nimport tailwind, { PluginConfigOpts, tailwindHMR } from 'stencil-tailwind-plugin';\n\nimport { angularValueAccessorBindings, generateCustomElementsJson, vueComponentModels } from './src/tools';\nimport tailwindConf from '../../tailwind.config';\n\nconst tailwindOpts: PluginConfigOpts = {\n  postcss: resolve(__dirname, '../../postcss.config.js').replace(/\\\\/g, '/'),\n  tailwindConf: tailwindConf,\n  stripComments: true,\n};\n\nconst namespace = 'beeq';\nconst componentCorePackage = `@${namespace}/core`;\nconst customElementsDir = 'dist/components';\n\nexport const config: Config = {\n  namespace,\n  taskQueue: 'async',\n  buildDist: true,\n  enableCache: true,\n  env: {\n    BEEQ_ASSETS_BASE_PATH: process.env.BEEQ_ASSETS_BASE_PATH,\n  },\n  globalScript: resolve(__dirname, './src/global/scripts/global.ts').replace(/\\\\/g, '/'),\n  globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\\\/g, '/'),\n  plugins: [\n    sass({\n      includePaths: [\n        resolve(__dirname, '../../node_modules').replace(/\\\\/g, '/'),\n        resolve(__dirname, 'src/global/styles').replace(/\\\\/g, '/'),\n      ],\n      injectGlobalPaths: [resolve(__dirname, 'src/global/styles/mixins/index.scss').replace(/\\\\/g, '/')],\n      outputStyle: 'compressed',\n      sourceMap: true,\n      sourceMapEmbed: true,\n      sourceMapContents: true,\n    }),\n    tailwind(tailwindOpts),\n    tailwindHMR({ tailwindConf }),\n  ],\n  outputTargets: [\n    { type: 'docs-readme' },\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    { type: 'docs-vscode', file: 'custom-elements.json' },\n    { type: 'dist', copy: [{ src: '../README.md' }] },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      dir: customElementsDir,\n      minify: true,\n    },\n    {\n      type: 'www',\n      copy: [\n        { src: 'global/assets', dest: 'assets' },\n        { src: 'global/scripts', dest: 'scripts' },\n      ],\n      serviceWorker: null, // disable service workers\n    },\n    angular({\n      componentCorePackage,\n      outputType: 'component', // Generate many component wrappers tied to a single Angular module (lazy/hydrated approach)\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/src/directives/components.ts').replace(/\\\\/g, '/'),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    angular({\n      componentCorePackage,\n      outputType: 'standalone', // Generate a component with the standalone flag set to true.\n      directivesProxyFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/components.ts').replace(\n        /\\\\/g,\n        '/',\n      ),\n      directivesArrayFile: resolve(__dirname, '../beeq-angular/standalone/src/directives/index.ts').replace(/\\\\/g, '/'),\n      valueAccessorConfigs: angularValueAccessorBindings,\n      customElementsDir,\n    }),\n    react({\n      outDir: resolve(__dirname, '../beeq-react/src/').replace(/\\\\/g, '/'),\n      customElementsDir,\n    }),\n    react({\n      outDir: resolve(__dirname, '../beeq-react/ssr').replace(/\\\\/g, '/'),\n      hydrateModule: '@beeq/core/dist/hydrate',\n      customElementsDir,\n    }),\n    vue({\n      componentCorePackage,\n      proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\\\/g, '/'),\n      componentModels: vueComponentModels,\n      includeDefineCustomElements: true,\n      hydrateModule: '@beeq/core/dist/hydrate',\n      customElementsDir,\n    }),\n  ],\n  extras: {\n    /**\n     * Details:\n     * https://stenciljs.com/docs/config-extras\n     */\n    enableImportInjection: true,\n    experimentalScopedSlotChanges: true,\n    experimentalSlotFixes: true,\n  },\n  preamble: 'Built by Endavans\\n© https://beeq.design - Apache 2 License.',\n  watchIgnoredRegex: /(custom-elements\\.)((d\\.ts)|(json))$/g,\n  devServer: {\n    openBrowser: false,\n    port: 8001,\n    reloadStrategy: 'pageReload',\n  },\n};\n"]}

package/dist/types/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/.stencil/packages/beeq/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/{home/workflows/workspace → Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System}/packages/beeq/.stencil/tailwind.config.d.ts

@@ -3,6 +3,47 @@ declare const _default: {
     presets: {
         theme: {
             colors: {
+                focus: string;
+                data: {
+                    "01": string;
+                    "02": string;
+                    "03": string;
+                    "04": string;
+                    "05": string;
+                    "06": string;
+                    "07": string;
+                    "08": string;
+                    "09": string;
+                    "10": string;
+                    "11": string;
+                    "12": string;
+                };
+                icon: {
+                    primary: string;
+                    alt: string;
+                    secondary: string;
+                    inverse: string;
+                    brand: string;
+                    info: string;
+                    success: string;
+                    warning: string;
+                    danger: string;
+                };
+                ui: {
+                    primary: string;
+                    alt: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    brand: string;
+                    "brand-alt": string;
+                    success: string;
+                    "success-alt": string;
+                    warning: string;
+                    "warning-alt": string;
+                    danger: string;
+                    "danger-alt": string;
+                };
                 blue: {
                     100: string;
                     200: string;
@@ -213,82 +254,7 @@ declare const _default: {
                     900: string;
                     1000: string;
                 };
-                bg: {
-                    primary: string;
-                    secondary: string;
-                    tertiary: string;
-                    alt: string;
-                    inverse: string;
-                    brand: string;
-                    overlay: string;
-                };
-                data: {
-                    "01": string;
-                    "02": string;
-                    "03": string;
-                    "04": string;
-                    "05": string;
-                    "06": string;
-                    "07": string;
-                    "08": string;
-                    "09": string;
-                    "10": string;
-                    "11": string;
-                    "12": string;
-                };
-                focus: string;
-                icon: {
-                    primary: string;
-                    alt: string;
-                    secondary: string;
-                    inverse: string;
-                    brand: string;
-                    info: string;
-                    success: string;
-                    warning: string;
-                    danger: string;
-                };
-                state: {
-                    hover: string;
-                    active: string;
-                };
-                stroke: {
-                    primary: string;
-                    secondary: string;
-                    tertiary: string;
-                    inverse: string;
-                    brand: string;
-                    alt: string;
-                    success: string;
-                    warning: string;
-                    danger: string;
-                };
-                text: {
-                    primary: string;
-                    alt: string;
-                    secondary: string;
-                    inverse: string;
-                    brand: string;
-                    info: string;
-                    success: string;
-                    warning: string;
-                    danger: string;
-                };
-                ui: {
-                    primary: string;
-                    alt: string;
-                    secondary: string;
-                    tertiary: string;
-                    inverse: string;
-                    brand: string;
-                    "brand-alt": string;
-                    success: string;
-                    "success-alt": string;
-                    warning: string;
-                    "warning-alt": string;
-                    danger: string;
-                    "danger-alt": string;
-                };
+                inherit: string;
                 current: string;
                 transparent: string;
             };
@@ -314,6 +280,7 @@ declare const _default: {
                 l: string;
             };
             fontFamily: {
+                inherit: string;
                 default: string;
                 outfit: string;
                 poppins: string;
@@ -339,23 +306,82 @@ declare const _default: {
                 bold: string;
             };
             lineHeight: {
+                inherit: string;
                 small: string;
                 regular: string;
                 large: string;
             };
             strokeWidth: {
+                inherit: string;
                 none: string;
                 s: string;
                 m: string;
                 l: string;
             };
             extend: {
-                height: {
-                    "dynamic-vh": string;
+                backgroundColor: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    alt: string;
+                    inverse: string;
+                    brand: string;
+                    overlay: string;
+                };
+                borderColor: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    brand: string;
+                    alt: string;
+                    success: string;
+                    warning: string;
+                    danger: string;
+                };
+                stroke: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    inverse: string;
+                    brand: string;
+                    alt: string;
+                    success: string;
+                    warning: string;
+                    danger: string;
+                };
+                textColor: {
+                    primary: string;
+                    alt: string;
+                    secondary: string;
+                    inverse: string;
+                    brand: string;
+                    info: string;
+                    success: string;
+                    warning: string;
+                    danger: string;
+                };
+                fill: {
+                    primary: string;
+                    alt: string;
+                    secondary: string;
+                    inverse: string;
+                    brand: string;
+                    info: string;
+                    success: string;
+                    warning: string;
+                    danger: string;
                 };
                 content: {
                     empty: string;
                 };
+                cursor: {
+                    inherit: string;
+                };
+                height: {
+                    inherit: string;
+                    "dynamic-vh": string;
+                };
                 spacing: {
                     xs3: string;
                     xs2: string;

package/dist/types/_storybook/foundation/helper/index.d.ts

@@ -1,4 +1,2 @@
-export declare function mapColors(colors: string[]): {
-    [k: string]: string;
-};
 export declare function capitalize(text: string): string;
+export declare function getVariableValue(name: string): string;

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

@@ -12,6 +12,12 @@ import { TAlertBorderRadius, TAlertType } from './bq-alert.types';
  * @part svg - The `<svg>` element of the predefined bq-icon component
  * @part title - The container `<div>` that wraps the alert title content
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ *
+ * @slot - The alert title content (no slot name required)
+ * @slot body - The alert description content
+ * @slot footer - The alert footer content
+ * @slot icon - The predefined icon based on the alert type (info, success, warning, error, default)
+ * @slot btn-close - The close button of the alert
  */
 export declare class BqAlert {
     private autoDismissDebounce;
@@ -44,10 +50,10 @@ export declare class BqAlert {
     bqHide: EventEmitter;
     /** Callback handler to be called when the alert is shown */
     bqShow: EventEmitter;
-    /** Callback handler to be called after the alert has been opened */
-    bqAfterOpen: EventEmitter;
-    /** Callback handler to be called after the alert has been closed */
-    bqAfterClose: EventEmitter;
+    /** Callback handler to be called after the alert has been shown */
+    bqAfterShow: EventEmitter;
+    /** Callback handler to be called after the alert has been hidden */
+    bqAfterHide: EventEmitter;
     componentWillLoad(): void;
     componentDidLoad(): void;
     /** Method to be called to hide the alert component */

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

@@ -12,6 +12,7 @@ export declare class BqButton {
     private prefixElem;
     private suffixElem;
     el: HTMLBqButtonElement;
+    internals: ElementInternals;
     private hasPrefix;
     private hasSuffix;
     /** The appearance style to apply to the button */
@@ -55,6 +56,10 @@ export declare class BqButton {
     private handleBlur;
     private handleFocus;
     private handleClick;
+    private handleFormAction;
+    private formActions;
+    private submitAssociatedForm;
     private handleSlotChange;
+    private preventEvent;
     render(): any;
 }

package/dist/types/components/date-picker/bq-date-picker.d.ts

@@ -149,6 +149,7 @@ export declare class BqDatePicker {
     /** Callback handler emitted when the input has received focus */
     bqFocus: EventEmitter<HTMLBqDatePickerElement>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     handleOpenChange(ev: CustomEvent<{
         open: boolean;
     }>): void;

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

@@ -30,6 +30,7 @@ export declare class BqDivider {
     strokeLinecap?: TDividerStrokeLinecap;
     checkPropValues(): void;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private handleSlotChange;
     private get strokeAttributes();

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

@@ -13,7 +13,7 @@ export declare class BqIcon {
     /** Set the stroke color of the SVG. The value should be a valid value of the palette color */
     color?: string;
     /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */
-    name: string;
+    name?: string;
     /** Set the size of the SVG */
     size?: string | number;
     /** Set the source of the SVG. If the source is set, the name property will be ignored */
@@ -29,6 +29,8 @@ export declare class BqIcon {
     /** Callback handler to be called when the SVG has loaded */
     svgLoaded: EventEmitter;
     connectedCallback(): void;
+    componentWillLoad(): void;
+    private setupIconComponent;
     private getIconSource;
     private loadIcon;
     render(): any;

package/dist/types/components/icon/helper/request.d.ts

@@ -1,4 +1,20 @@
 export declare const iconContent: Map<string, string>;
+/**
+ * Retrieves the SVG content for a given URL, fetching and caching it if necessary.
+ * @param {string} url - The URL to fetch the SVG from.
+ * @param {boolean} sanitize - Whether to sanitize the SVG content.
+ * @returns {Promise<unknown>} - A promise that resolves to the SVG content.
+ */
 export declare const getSvgContent: (url: string, sanitize: boolean) => Promise<unknown>;
+/**
+ * Validates and sanitizes the SVG content.
+ * @param {string} svgContent - The SVG content to validate.
+ * @returns {string} - The sanitized SVG content.
+ */
 export declare const validateContent: (svgContent: string) => string;
-export declare const isValid: (elm: HTMLElement) => boolean;
+/**
+ * Checks if an HTML element is valid (i.e., does not contain scripts or event handlers).
+ * @param {HTMLElement} elm - The element to check.
+ * @returns {boolean} - True if the element is valid, false otherwise.
+ */
+export declare const isValid: (elm: Element) => boolean;

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

@@ -12,6 +12,12 @@ import { TNotificationBorderRadius, TNotificationType } from './bq-notification.
  * @part svg - The `<svg>` element of the predefined bq-icon component.
  * @part title - The container `<div>` that wraps the notification title content
  * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM
+ *
+ * @slot - The notification title content
+ * @slot body - The notification description content
+ * @slot footer - The notification footer content
+ * @slot icon - The icon to be displayed in the notification
+ * @slot btn-close - The close button of the notification
  */
 export declare class BqNotification {
     private autoDismissDebounce;
@@ -21,6 +27,7 @@ export declare class BqNotification {
     el: HTMLBqNotificationElement;
     private hasContent;
     private hasFooter;
+    private notificationPortal;
     /** If true, the notification will automatically hide after the specified amount of time */
     autoDismiss: boolean;
     /** The corder radius of the notification component */
@@ -46,6 +53,7 @@ export declare class BqNotification {
     bqAfterOpen: EventEmitter;
     /** Callback handler to be called after the notification has been closed */
     bqAfterClose: EventEmitter;
+    connectedCallback(): void;
     componentWillLoad(): void;
     afterNotificationClose(): void;
     /** Method to be called to hide the notification component */

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

@@ -50,10 +50,5 @@ export declare class BqRadio {
     private handleOnBlur;
     private handleOnKeyDown;
     private get tabindex();
-    /**
-     * This method prevents label to steal the focus and trigger input blur
-     * details https://stackoverflow.com/a/73364174
-     */
-    private onLabelMouseDown;
     render(): any;
 }

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

@@ -111,6 +111,7 @@ export declare class BqSelect {
         item: HTMLBqOptionElement;
     }>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     formAssociatedCallback(): void;
     formResetCallback(): Promise<void>;
@@ -125,6 +126,7 @@ export declare class BqSelect {
      * @memberof BqSelect
      */
     clear(): Promise<void>;
+    private initMultipleValue;
     private handleBlur;
     private handleFocus;
     private handleSelect;

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

@@ -75,8 +75,10 @@ export declare class BqSlider {
     /** Handler to be called when the slider gets focused */
     bqFocus: EventEmitter<HTMLBqSliderElement>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
+    private init;
     private runUpdates;
     private setState;
     private setThumbPosition;

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

@@ -21,6 +21,7 @@ export declare class BqStepItem {
         value: string;
     }>;
     connectedCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private get isDisabled();
     private get isCurrent();

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

@@ -5,10 +5,14 @@ import { TToastBorderRadius, TToastPlacement, TToastType } from './bq-toast.type
  * @part icon-info - The `<div>` container that holds the icon component.
  * @part base - The `<div>` container of the internal bq-icon component.
  * @part svg - The `<svg>` element of the internal bq-icon component.
+ *
+ * @slot - The content to be displayed in the toast component.
+ * @slot icon - The icon to be displayed in the toast component.
  */
 export declare class BqToast {
     private autoDismissDebounce;
     el: HTMLBqToastElement;
+    private toastPortal;
     /** The corder radius of the toast component */
     border: TToastBorderRadius;
     /** Type of toast */
@@ -28,6 +32,7 @@ export declare class BqToast {
     bqHide: EventEmitter<HTMLBqToastElement>;
     /** Callback handler to be called when the notification is shown */
     bqShow: EventEmitter<HTMLBqToastElement>;
+    connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
     onNotificationHide(): void;

package/dist/types/components.d.ts

@@ -629,7 +629,7 @@ export namespace Components {
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
-        "name": string;
+        "name"?: string;
         /**
           * Set the size of the SVG
          */
@@ -1636,8 +1636,8 @@ declare global {
     interface HTMLBqAlertElementEventMap {
         "bqHide": any;
         "bqShow": any;
-        "bqAfterOpen": any;
-        "bqAfterClose": any;
+        "bqAfterShow": any;
+        "bqAfterHide": any;
     }
     interface HTMLBqAlertElement extends Components.BqAlert, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBqAlertElementEventMap>(type: K, listener: (this: HTMLBqAlertElement, ev: BqAlertCustomEvent<HTMLBqAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2375,13 +2375,13 @@ declare namespace LocalJSX {
          */
         "hideIcon"?: boolean;
         /**
-          * Callback handler to be called after the alert has been closed
+          * Callback handler to be called after the alert has been hidden
          */
-        "onBqAfterClose"?: (event: BqAlertCustomEvent<any>) => void;
+        "onBqAfterHide"?: (event: BqAlertCustomEvent<any>) => void;
         /**
-          * Callback handler to be called after the alert has been opened
+          * Callback handler to be called after the alert has been shown
          */
-        "onBqAfterOpen"?: (event: BqAlertCustomEvent<any>) => void;
+        "onBqAfterShow"?: (event: BqAlertCustomEvent<any>) => void;
         /**
           * Callback handler to be called when the alert is hidden
          */
@@ -2948,7 +2948,7 @@ declare namespace LocalJSX {
         /**
           * Icon name to load. Please check all available icons [here](https://phosphoricons.com/)
          */
-        "name": string;
+        "name"?: string;
         /**
           * Callback handler to be called when the SVG has loaded
          */

package/dist/types/global/scripts/global.d.ts

@@ -12,6 +12,10 @@ declare module '@stencil/core' {
             'calendar-range': MapEvents<CalendarRangeProps> & JSXBase.HTMLAttributes<CalendarDateProps>;
             'calendar-date': CalendarDateProps & JSXBase.HTMLAttributes<CalendarDateProps>;
             'calendar-month': CalendarMonthProps & JSXBase.HTMLAttributes<CalendarMonthProps>;
+            slot: JSXBase.SlotAttributes & {
+                id?: string;
+                class?: string;
+            };
         }
     }
 }

package/dist/types/shared/utils/assetsPath.d.ts

@@ -1,28 +1,11 @@
 /**
- * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.
- * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts
- */
-/**
- * Extend the Window interface to include the `bqSVGBasePath` property and prevent it from being modified.
- * This is necessary to prevent the basePath from being modified by external scripts.
- */
-declare global {
-    interface Window {
-        bqSVGBasePath: string;
-    }
-}
-/**
- * Sets the `bqSVGBasePath` in the global window object,
- * which is used to determine the SVG path in the BQIcon component.
- * This method is the only way to update the base path.
- *
- * @param path - The new base path to set.
+ * Sets the base path for the assets.
+ * @param {string} path - The base path to set.
  */
 export declare const setBasePath: (path: string) => void;
 /**
- * Retrieves the `bqSVGBasePath`, optionally appending a subpath.
- *
- * @param subpath - The subpath to append to the base path.
- * @returns The full base path including the subpath.
+ * Gets the base path for the assets.
+ * @param {string} subpath - An optional subpath to append to the base path.
+ * @returns {string} The base path of the assets.
  */
 export declare const getBasePath: (subpath?: string) => string;

package/dist/types/shared/utils/cssVariables.d.ts

@@ -4,7 +4,7 @@
  * @param {string} colorName - Valid string value.
  * @return {string} The corresponding CSS custom property variable
  */
-export declare function getColorCSSVariable(colorName: string): string;
+export declare function getColorCSSVariable(colorName: string): string | undefined;
 /**
  * Get compiled CSS custom property value
  *

package/dist/types/stencil-public-runtime.d.ts

@@ -1564,6 +1564,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beeq/core",
-    "version": "1.8.0-beta.1",
+    "version": "1.8.0-beta.11",
     "license": "Apache-2.0",
     "description": "BEEQ, a Design System components ruled by Endavan developers :)",
     "main": "./dist/index.cjs.js",
@@ -15,7 +15,7 @@
     "dependencies": {
         "@floating-ui/core": "^1.6.3",
         "@floating-ui/dom": "^1.6.6",
-        "@stencil/core": "^4.19.2",
+        "@stencil/core": "^4.22.1",
         "cally": "^0.7.1"
     },
     "repository": {