@beeq/core 1.8.0-beta.9 → 1.8.1

package/dist/stencil.config.js

@@ -26,7 +26,6 @@ export const config = {
     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: [
         sass({
@@ -45,13 +44,23 @@ export const config = {
     ],
     outputTargets: [
         { type: 'docs-readme' },
+        /**
+         * The output custom-elements.json file is used by Storybook to generate the documentation.
+         * @see packages/beeq/.storybook/custom-elements.json
+         */
         { type: 'docs-custom', generator: generateCustomElementsJson },
-        { type: 'docs-vscode', file: 'custom-elements.json' },
-        { type: 'dist', copy: [{ src: '../README.md' }] },
+        {
+            type: 'dist',
+            copy: [
+                { src: '../README.md', dest: '../../README.md', warn: true },
+                { src: '../cem/*.*', dest: '../', warn: true },
+            ],
+        },
         { type: 'dist-hydrate-script', dir: 'dist/hydrate' },
         {
             type: 'dist-custom-elements',
             customElementsExportBehavior: 'single-export-module',
+            externalRuntime: false,
             dir: customElementsDir,
             minify: true,
         },
@@ -69,6 +78,7 @@ export const config = {
             directivesProxyFile: resolve(__dirname, '../beeq-angular/src/directives/components.ts').replace(/\\/g, '/'),
             directivesArrayFile: resolve(__dirname, '../beeq-angular/src/directives/index.ts').replace(/\\/g, '/'),
             valueAccessorConfigs: angularValueAccessorBindings,
+            inlineProperties: true,
             customElementsDir,
         }),
         angular({
@@ -91,8 +101,11 @@ export const config = {
         vue({
             componentCorePackage,
             proxiesFile: resolve(__dirname, '../beeq-vue/src/components.ts').replace(/\\/g, '/'),
-            componentModels: vueComponentModels,
             includeImportCustomElements: true,
+            includePolyfills: false,
+            includeDefineCustomElements: false,
+            componentModels: vueComponentModels,
+            // 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  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      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  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    /**\n     * The output custom-elements.json file is used by Storybook to generate the documentation.\n     * @see packages/beeq/.storybook/custom-elements.json\n     */\n    { type: 'docs-custom', generator: generateCustomElementsJson },\n    {\n      type: 'dist',\n      copy: [\n        { src: '../README.md', dest: '../../README.md', warn: true },\n        { src: '../cem/*.*', dest: '../', warn: true },\n      ],\n    },\n    { type: 'dist-hydrate-script', dir: 'dist/hydrate' },\n    {\n      type: 'dist-custom-elements',\n      customElementsExportBehavior: 'single-export-module',\n      externalRuntime: false,\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      inlineProperties: true,\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      includeImportCustomElements: true,\n      includePolyfills: false,\n      includeDefineCustomElements: false,\n      componentModels: vueComponentModels,\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/components/accordion/bq-accordion.d.ts

@@ -1,12 +1,102 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TAccordionAppearance, TAccordionSize } from './bq-accordion.types';
 /**
+ * The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-accordion appearance="filled" size="medium">
+ *   <bq-avatar size="xsmall" image="/image/url/img.png" slot="prefix"></bq-avatar>
+ *   <h3 slot="header">Header</h3>
+ *   <div>Lorem ipsum dolor...</div>
+ * </bq-accordion>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/713eae-accordion
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {"filled" | "ghost"} [appearance="filled"] - The appearance style of the Accordion
+ * @attr {boolean} [disabled=false] - If true, the Accordion is disabled
+ * @attr {boolean} [expanded=false] - If true, the Accordion is expanded
+ * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.
+ * @attr {boolean} [rotate=false] - If true, the Accordion expand icon is rotate 180deg when expanded
+ * @attr {"small" | "medium"} [size="medium"] - The size of the the Accordion
+ *
+ * @event bqOpen - Handler to be called when the accordion is opened
+ * @event bqAfterOpen - Handler to be called after the accordion is opened
+ * @event bqClose - Handler to be called when the accordion is closed
+ * @event bqAfterClose - Handler to be called after the accordion is closed
+ * @event bqFocus - Handler to be called when the accordion gets focus
+ * @event bqClick - Handler to be called when the accordion is clicked
+ * @event bqBlur - Handler to be called when the accordion loses focus
+ *
+ * @slot - The accordion panel content
+ * @slot collapse - The accordion collapse icon
+ * @slot expand - The accordion expand icon
+ * @slot header - The accordion header content
+ * @slot prefix - The accordion prefix content (icon or avatar)
+ * @slot suffix - The accordion suffix content (icon or avatar)
+ *
  * @part base - The `<details>` that holds the accordion content
  * @part header - The `<summary>` that holds the accordion header content
- * @part prefix - The `<div>` that holds the accordion text prefix icon / avatar
- * @part text - The `<div>` that holds the accordion header text
- * @part suffix - The `<div>` that holds the accordion text suffix icon
  * @part panel - The `<div>` that holds the accordion panel content
+ * @part prefix - The `<div>` that holds the accordion prefix content
+ * @part suffix - The `<div>` that holds the accordion suffix content
+ * @part text - The `<div>` that holds the accordion header text content
+ *
+ * @cssprop --bq-accordion--small-padding-y - Accordion small vertical padding
+ * @cssprop --bq-accordion--small-padding-start - Accordion small start padding
+ * @cssprop --bq-accordion--small-padding-end - Accordion small end padding
+ * @cssprop --bq-accordion--small-padding-gap - Accordion small gap distance between suffix, title and prefix
+ * @cssprop --bq-accordion--small-radius - Accordion small border radius
+ *
+ * @cssprop --bq-accordion--medium-padding-y - Accordion medium vertical padding
+ * @cssprop --bq-accordion--medium-padding-start - Accordion medium start padding
+ * @cssprop --bq-accordion--medium-padding-end - Accordion medium end padding
+ * @cssprop --bq-accordion--medium-padding-gap - Accordion medium gap distance between suffix, title and prefix
+ * @cssprop --bq-accordion--medium-radius - Accordion medium border radius
+ *
+ * @cssprop --bq-accordion--collapsed-border-color - Accordion collapsed border color
+ * @cssprop --bq-accordion--collapsed-border-style - Accordion collapsed border style
+ * @cssprop --bq-accordion--collapsed-border-width - Accordion collapsed border width
+ *
+ * @cssprop --bq-accordion--expanded-border-color - Accordion expanded border color
+ * @cssprop --bq-accordion--expanded-border-style - Accordion expanded border style
+ * @cssprop --bq-accordion--expanded-border-width - Accordion expanded border width
+ *
+ * @cssprop --bq-accordion--filled-collapsed-background - Accordion filled collapsed header background
+ * @cssprop --bq-accordion--filled-collapsed-text-color - Accordion filled collapsed header text color
+ * @cssprop --bq-accordion--filled-expanded-background - Accordion filled expanded header background
+ * @cssprop --bq-accordion--filled-expanded-collapsed-hover - Accordion filled expanded header color on hover
+ * @cssprop --bq-accordion--filled-expanded-text-color - Accordion filled expanded header text color
+ *
+ * @cssprop --bq-accordion--ghost-collapsed-background - Accordion ghost collapsed header background
+ * @cssprop --bq-accordion--ghost-collapsed-text-color - Accordion ghost collapsed header text color
+ * @cssprop --bq-accordion--ghost-expanded-background - Accordion ghost expanded header background
+ * @cssprop --bq-accordion--ghost-expanded-collapsed-hover - Accordion ghost expanded header color on hover
+ * @cssprop --bq-accordion--ghost-expanded-text-color - Accordion ghost expanded header text color
+ *
+ * @cssprop --bq-accordion--panel-filled-border-color - Accordion filled panel border color
+ * @cssprop --bq-accordion--panel-filled-border-style - Accordion filled panel border style
+ * @cssprop --bq-accordion--panel-filled-border-width - Accordion filled panel border width
+ * @cssprop --bq-accordion--panel-small-filled-padding-y - Accordion small filled panel vertical padding
+ * @cssprop --bq-accordion--panel-small-filled-padding-start - Accordion small filled panel start padding
+ * @cssprop --bq-accordion--panel-small-filled-padding-end - Accordion small filled panel end padding
+ * @cssprop --bq-accordion--panel-medium-filled-padding-y - Accordion medium filled panel vertical padding
+ * @cssprop --bq-accordion--panel-medium-filled-padding-start - Accordion medium filled panel start padding
+ * @cssprop --bq-accordion--panel-medium-filled-padding-end - Accordion medium filled panel end padding
+ *
+ * @cssprop --bq-accordion--panel-ghost-border-color - Accordion ghost panel border color
+ * @cssprop --bq-accordion--panel-ghost-border-style - Accordion ghost panel border style
+ * @cssprop --bq-accordion--panel-ghost-border-width - Accordion ghost panel border width
+ * @cssprop --bq-accordion--panel-small-ghost-padding-y - Accordion small ghost panel vertical padding
+ * @cssprop --bq-accordion--panel-small-ghost-padding-start - Accordion small ghost panel start padding
+ * @cssprop --bq-accordion--panel-small-ghost-padding-end - Accordion small ghost panel end padding
+ * @cssprop --bq-accordion--panel-medium-ghost-padding-y - Accordion medium ghost panel vertical padding
+ * @cssprop --bq-accordion--panel-medium-ghost-padding-start - Accordion medium ghost panel start padding
+ * @cssprop --bq-accordion--panel-medium-ghost-padding-end - Accordion medium ghost panel end padding
  */
 export declare class BqAccordion {
     private accordion;
@@ -16,20 +106,20 @@ export declare class BqAccordion {
     el: HTMLBqAccordionElement;
     private hasPrefix;
     private hasSuffix;
-    /** The appearance style of accordion */
+    /** The appearance style of the Accordion */
     appearance: TAccordionAppearance;
-    /** If true accordion is disabled */
+    /** If true, the Accordion is disabled */
     disabled: boolean;
-    /** If true accordion is expanded */
+    /** If true, the Accordion is expanded */
     expanded: boolean;
     /**
      * Animation is set through JS when the browser does not support CSS calc-size()
-     * If true, the accordion animation, will be disabled. No animation will be applied.
+     * If true, the Accordion animation, will be disabled. No animation will be applied.
      */
     noAnimation: boolean;
-    /** If true accordion expand icon is rotate 180deg when expanded */
+    /** If true, the Accordion expand icon is rotate 180deg when expanded */
     rotate: boolean;
-    /** The size of accordion */
+    /** The size of the Accordion */
     size: TAccordionSize;
     checkPropValues(): void;
     handleExpandedChange(): void;
@@ -47,7 +137,7 @@ export declare class BqAccordion {
     bqClose: EventEmitter<HTMLBqAccordionElement>;
     /** Handler to be called after the accordion is closed */
     bqAfterClose: EventEmitter<HTMLBqAccordionElement>;
-    /** @internal Handler to be called when the accordion is clicked */
+    /** Handler to be called when the accordion is clicked */
     bqClick: EventEmitter<HTMLBqAccordionElement>;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,6 +1,31 @@
 import { TAccordionAppearance, TAccordionSize } from '../accordion/bq-accordion.types';
 /**
+ * The accordion group component is a container for multiple accordion elements.
+ * It allows to manage the appearance and size of all accordions at once.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-accordion-group appearance="filled" size="medium">
+ *   <bq-accordion> ... </bq-accordion>
+ *   <bq-accordion> ... </bq-accordion>
+ *   <bq-accordion> ... </bq-accordion>
+ * </bq-accordion-group>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/713eae-accordion
+ * @status stable
+ *
+ * @attr {"filled" | "ghost"} [appearance="filled"] - The appearance style of accordion to be applied to all accordions
+ * @attr {boolean} [expandAll=false] - If true all accordions are expanded
+ * @attr {boolean} [no-animation=false] - Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.
+ * @attr {boolean} [multiple=false] - If true multiple accordions can be expanded at the same time
+ * @attr {"small" | "medium"} [size="medium"] - The size of accordion to be applied to all accordions
+ *
+ * @slot - The default slot where the bq-accordion elements are placed.
+ *
  * @part base - The component's base wrapper.
+ *
+ * @cssprop --bq-accordion-group--gap - Accordion group distance between elements
  */
 export declare class BqAccordionGroup {
     el: HTMLBqAccordionGroupElement;

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

@@ -1,6 +1,51 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { TAlertBorderRadius, TAlertType } from './bq-alert.types';
 /**
+ * The Alert is a user interface component used to convey important information to the user in a clear and concise manner.
+ * It can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-alert>
+ *   <bq-icon name="star" slot="icon"></bq-icon>
+ *   Title
+ *   <span slot="body">
+ *     Description
+ *     <a class="bq-link" href="https://example.com">Link</a>
+ *   </span>
+ *   <div slot="footer">
+ *     <bq-button appearance="primary" size="small">Button</bq-button>
+ *     <bq-button appearance="link" size="small">Button</bq-button>
+ *   </div>
+ * </bq-alert>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/848a50-alert
+ * @status stable
+ *
+ * @dependency bq-button
+ * @dependency bq-icon
+ *
+ * @attr {boolean} [auto-dismiss=false] - If true, the alert will automatically hide after the specified amount of time
+ * @attr {"none" | "xs2" | "xs" | "s" | "m" | "l" | "full"} [border='s'] - The corner radius of the alert component
+ * @attr {boolean} [disable-close=false] - If true, the close button at the top right of the alert won't be shown
+ * @attr {boolean} [hide-icon=false] - If true, the alert icon won't be shown
+ * @attr {boolean} [open=false] - If true, the alert will be shown
+ * @attr {number} [time=3000] - The length of time, in milliseconds, after which the alert will close itself. Only valid if `autoDismiss="true"`
+ * @attr {"info" | "success" | "warning" | "error" | "default"} [type='default'] - Type of Alert
+ * @attr {boolean} [sticky=false] - If true, the alert component will remain fixed at the top of the page, occupying the full viewport
+ *
+ * @event bqHide - Callback handler to be called when the alert is hidden
+ * @event bqShow - Callback handler to be called when the alert is shown
+ * @event bqAfterShow - Callback handler to be called after the alert has been shown
+ * @event bqAfterHide - Callback handler to be called after the alert has been hidden
+ *
+ * @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
+ *
  * @part base - The `<div>` container of the predefined bq-icon component
  * @part body - The container `<div>` that wraps the alert description content
  * @part btn-close - The `bq-button` used to close the alert
@@ -13,11 +58,32 @@ import { TAlertBorderRadius, TAlertType } from './bq-alert.types';
  * @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
+ * @cssprop --bq-alert--background - The alert background color
+ * @cssprop --bq-alert--border-radius - The alert border radius
+ * @cssprop --bq-alert--content-footer-gap - The alert content and footer gap
+ * @cssprop --bq-alert--title-body-gap - The alert title and body gap
+ *
+ * @cssprop --bq-alert--border-color - The alert border color
+ * @cssprop --bq-alert--border-style - The alert border style
+ * @cssprop --bq-alert--border-width - The alert border width
+ *
+ * @cssprop --bq-alert--background-info - The alert background color for info type
+ * @cssprop --bq-alert--background-success - The alert background color for success type
+ * @cssprop --bq-alert--background-warning - The alert background color for warning type
+ * @cssprop --bq-alert--background-error - The alert background color for error type
+ *
+ * @cssprop --bq-alert--border-info - The alert border color for info type
+ * @cssprop --bq-alert--border-success - The alert border color for success type
+ * @cssprop --bq-alert--border-warning - The alert border color for warning type
+ * @cssprop --bq-alert--border-error - The alert border color for error type
+ *
+ * @cssprop --bq-alert--icon-color-info - The alert icon color for info type
+ * @cssprop --bq-alert--icon-color-success - The alert icon color for success type
+ * @cssprop --bq-alert--icon-color-warning - The alert icon color for warning type
+ * @cssprop --bq-alert--icon-color-error - The alert icon color for error type
+ *
+ * @cssprop --bq-alert--padding - The alert padding
+ * @cssprop --bq-alert--min-width - The alert min width
  */
 export declare class BqAlert {
     private autoDismissDebounce;

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

@@ -1,8 +1,58 @@
 import { TAvatarShape, TAvatarSize } from './bq-avatar.types';
 /**
+ * The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.
+ * This component is useful for displaying user profile pictures or any other image that represents a person or an entity.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-avatar
+ *   alt-text="John Doe profile picture"
+ *   image="/image/url/photo-1524593689594.jpeg"
+ *   label="John Doe profile picture"
+ *   shape="circle"
+ *   size="medium"
+ * >
+ *   <bq-badge slot="badge" text-color="#fff">9</bq-badge>
+ * </bq-avatar>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/148da7-avatar
+ * @status stable
+ *
+ * @attr {string} alt-text - Alternate text for the avatar image if the image cannot be displayed.
+ * @attr {string} image - The image source to load on the avatar (this can be also a base64 encoded image).
+ * @attr {string} label - A text to use for describing the avatar on assistive devices.
+ * @attr {string} initials - The text to display on avatar.
+ * @attr {"circle" | "square"} shape - The shape of the avatar.
+ * @attr {"xsmall" | "small" | "medium" | "large"} size - The size of the avatar.
+ *
+ * @slot badge - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.
+ *
  * @part base - The component's internal wrapper.
  * @part img - The `<image>` tag element that load the image source.
- * @part text - The `<span>` tag element that renderd the `Initials` text string.
+ * @part text - The `<span>` tag element that rendered the `Initials` text string.
+ * @part badge - The container that wraps the badge slot element.
+ *
+ * @cssprop --bq-avatar--background - Avatar background color
+ *
+ * @cssprop --bq-avatar--border-color - Avatar border color
+ * @cssprop --bq-avatar--border-style - Avatar border style
+ * @cssprop --bq-avatar--border-width - Avatar border width
+ *
+ * @cssprop --bq-avatar--border-radius-circle - Avatar border radius for circle & any size
+ * @cssprop --bq-avatar--border-radius-squareXs - Avatar border radius for square & size xsmall
+ * @cssprop --bq-avatar--border-radius-squareS - Avatar border radius for square & size small
+ * @cssprop --bq-avatar--border-radius-squareM - Avatar border radius for square & size medium/large
+ *
+ * @cssprop --bq-avatar--size-xsmall - Avatar xsmall size
+ * @cssprop --bq-avatar--size-small - Avatar small size
+ * @cssprop --bq-avatar--size-medium - Avatar medium size
+ * @cssprop --bq-avatar--size-large - Avatar large size
+ *
+ * @cssprop --bq-avatar--badge-top-square - Badge top position shape square
+ * @cssprop --bq-avatar--badge-left-square - Badge left position shape square
+ * @cssprop --bq-avatar--badge-top-circle - Badge top position shape circle
+ * @cssprop --bq-avatar--badge-left-circle - Badge left position shape circle
  */
 export declare class BqAvatar {
     trimmedInitials: string;

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

@@ -1,7 +1,35 @@
 import { TBadgeSize } from './bq-badge.types';
 /**
+ * The Badge component is a visual indicator that can be added to various elements within a user interface.
+ * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-badge background-color="ui--success" text-color="text--inverse" size="small">9</bq-badge>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/194fd1-badge
+ * @status stable
+ *
+ * @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.
+ * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.
+ * @attr {"small" | "medium" | "large"} size - The size of the badge. Relevant if badge has no content.
+ *
+ * @slot - The default slot is used to add content to the badge. The content can be a number or a text.
+ *
  * @part base - The component's internal wrapper that holds the count.
  * @part number - The component's internal wrapper that holds the slot.
+ *
+ * @cssprop --bq-badge--background-color - The badge background color
+ * @cssprop --bq-badge--box-shadow - The badge box shadow
+ * @cssprop --bq-badge--border-color - The badge border color
+ * @cssprop --bq-badge--border-radius - The badge border radius
+ * @cssprop --bq-badge--border-style - The badge border style
+ * @cssprop --bq-badge--border-width - The badge border width
+ * @cssprop --bq-badge--size-small - The badge small size
+ * @cssprop --bq-badge--size-medium - The badge medium size
+ * @cssprop --bq-badge--size-large - The badge large size
+ * @cssprop --bq-badge--text-color - The badge text color
  */
 export declare class BqBadge {
     private spanElement?;

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

@@ -1,28 +1,36 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-breadcrumb label="Breadcrumb">
+ *   <bq-breadcrumb-item>Home</bq-breadcrumb-item>
+ *   <bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>
+ *   <bq-breadcrumb-item>Shirt</bq-breadcrumb-item>
+ *   <bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>
+ * </bq-breadcrumb>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/194fd1-breadcrumb
+ * @status stable
+ *
+ * @attr {string} label - The `aria-label` attribute to describe the type of navigation
+ *
+ * @slot - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.
+ * @slot separator - The slot to add a separator between breadcrumb items. Default separator is `/`.
+ *
  * @part navigation - The `nav` tag that loads the breadcrumb items
+ * @part separator - The container that wraps the separator element
  */
 export declare class BqBreadcrumb {
+    private navElem;
     private spanElem;
     el: HTMLBqBreadcrumbElement;
     /** The `aria-label` attribute to describe the type of navigation */
-    ariaLabel: string;
-    /** Handler to be called when `bq-breadcrumb-item` item loses focus. */
-    bqBreadcrumbBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;
-    /** Handler to be called when `bq-breadcrumb-item` item gets focus. */
-    bqBreadcrumbFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;
-    /** Handler to be called when `bq-breadcrumb-item` is selected (on click/enter press). */
-    bqBreadcrumbClick: EventEmitter<HTMLBqBreadcrumbItemElement>;
-    onBlur(event: CustomEvent<HTMLElement>): void;
-    onFocus(event: CustomEvent<HTMLElement>): void;
-    onClick(event: CustomEvent<HTMLElement>): void;
-    private setSeparator;
-    /**
-     * clone original element and add slot attr
-     * @returns cloned separator element
-     */
+    label: string;
+    private handleSlotChange;
     private getSeparatorElem;
-    private get breadcrumbItems();
     private get separatorFromSlot();
+    private get breadcrumbItems();
     render(): any;
 }

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

@@ -1,19 +1,52 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
+ * The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-breadcrumb-item label="Home page">
+ *   <bq-icon name="house-line" size="16"></bq-icon>
+ *   Home
+ * </bq-breadcrumb-item>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb
+ * @status stable
+ *
+ * @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.
+ * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.
+ * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.
+ *
+ * @event bqFocus - Handler to be called when item is focused
+ * @event bqClick - Handler to be called when item is clicked
+ * @event bqBlur - Handler to be called when item loses focus
+ *
+ * @slot - The default slot is used to add content to the breadcrumb item.
+ *
  * @part base - The component wrapper container
- * @part base - The breadcrumb item wrapper (`button` or `a`)
- * @part content - The `span` tag that loads the content item
- * @part separator - The `span` tag that loads the separator
+ * @part content - The `span` tag that wraps the content item
+ * @part item - The breadcrumb item wrapper (`button` or `a`)
+ * @part separator - The `span` tag that wraps the separator element
+ *
+ * @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)
+ * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator
+ * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item
+ * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator
+ * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator
  */
 export declare class BqBreadcrumbItem {
     el: HTMLBqBreadcrumbItemElement;
-    /**
-     * The aria-label that corresponds to the full title of the destination page.
-     * This won't be shown in the page, but it will be used by screen readers and other assistive devices.
-     */
-    ariaLabel: string;
-    /** If true, the item is the last element inside breadcrumb */
-    isLastItem: boolean;
     /** If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. */
     href: string;
     /** Where to display the link in the browser context. Relevant only if `href` is set. */

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

@@ -3,10 +3,61 @@ import { TButtonAppearance, TButtonBorderRadius, TButtonSize, TButtonType, TButt
 /**
  * Buttons are designed for users to take action on a page or a screen.
  *
+ * @example How to use it
+ * ```html
+ * <bq-button appearance="primary" border="m" size="medium">
+ *   <bq-icon name="arrow-circle-left" slot="prefix"></bq-icon>
+ *   Go back
+ * </bq-button>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/286b43-buttons
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {"primary" | "secondary" | "link" | "text"} appearance - The appearance style to apply to the button
+ * @attr {boolean} block - If `true`, it will make the button fit to its parent width.
+ * @attr {string} border - The corner radius of the button
+ * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)
+ * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.
+ * @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 {"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
+ * @attr {"standard" | "ghost" | "danger"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`)
+ *
+ * @event bqBlur - Handler to be called when the button loses focus
+ * @event bqFocus - Handler to be called when button gets focus
+ * @event bqClick - Handler to be called when the button is clicked
+ *
+ * @slot prefix - The prefix content to be displayed before the button label
+ * @slot - The button label content
+ * @slot suffix - The suffix content to be displayed after the button label
+ *
  * @part button - The `<a>` or `<button>` HTML element used under the hood.
  * @part prefix - The `<span>` tag element that acts as prefix container.
  * @part label - The `<span>` tag element that renders the text of the button.
  * @part suffix - The `<span>` tag element that acts as suffix container.
+ *
+ * @cssprop --bq-button--border-color - Button border color
+ * @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
  */
 export declare class BqButton {
     private prefixElem;