This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @swc/core to v1.7.18
• chore(deps): update dependency husky to v9.1.5
• chore(deps): update dependency lint-staged to v15.2.9
• chore(deps): update dependency ts-jest to v29.2.5
• chore(deps): update dependency @commitlint/cli to v19.4.0
• chore(deps): update dependency tslib to v2.7.0
• chore(deps): update node.js to v20.17.0
• chore(deps): update dependency puppeteer to v23

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency @stencil/react-output-target to v0.6.0

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update dependency eslint-import-resolver-typescript to v3.6.3
• chore(deps): update dependency jsdom to v24.1.3
• chore(deps): update nx to v19.6.3 (@nx/angular, @nx/devkit, @nx/esbuild, @nx/eslint, @nx/eslint-plugin, @nx/jest, @nx/js, @nx/plugin, @nx/react, @nx/rollup, @nx/storybook, @nx/workspace, nx)
• chore(deps): update dependency jsdom to v25

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update typescript-eslint to v8 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

BEEQ package

beeq/core

BEEQ version

1.3.3

Current Behavior

BqSelect is missing declaration of --bq-select--gap-label.

Expected Behavior

--bq-select--gap-label should be defined inside select/scss/bq-select.variables.scss

Steps to Reproduce

Search inside bee-q codebase --bq-select--gap-label, there is not definition.

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

bq-select with multiple property does not update when value is updated externally.

Expected Behavior

bq-select should react to external change of value and update input.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-select").value = JSON.stringify(["running"])

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json5
Error type: Invalid JSON5 (parsing failed)
Message: JSON5.parse error: JSON5: invalid character '\'' at 46:60

Describe the feature

Describe the use case for this feature

Describe the solution you'd like

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54950&mode=design&t=IM6eKno8O3mv7ODZ-1

Describe the feature

To enhance the consistency of our project's design elements, we need to introduce a standardized stroke size across the repository.

Describe the use case for this feature

Standardizing stroke sizes ensures a consistent and cohesive visual style across the application. This improves user experience by maintaining uniformity in UI elements like icons and borders. Additionally, using variables for stroke sizes simplifies maintenance and allows for easy updates, enhancing the scalability of our design system.

Describe the solution you'd like

Define Stroke Size Variables:

Add new variables for stroke sizes in the appropriate configuration or style file (e.g., variables.scss, config.js, etc.).
Ensure these variables cover the range of stroke sizes used throughout the project.

Update Existing Stroke Sizes:

Identify all instances in the codebase where stroke sizes are hardcoded.
Replace these hardcoded values with the newly defined stroke size variables.
Testing:

After updating the stroke sizes, thoroughly test the application to ensure that the changes do not negatively impact the UI/UX.

Pay special attention to elements that heavily rely on stroke sizes, such as icons, borders, and shapes.

Documentation:

Update any relevant documentation to reflect the new stroke size variables.
Provide examples of how to use these variables in the documentation.

Related Code

No response

Additional Information

No response

Describe the feature

The purpose of this feature is to have the ability to show a <bq-tooltip> to the slider thumb(s) for single and range variants.

Describe the use case for this feature

Showing a tooltip when the slider thumb(s) is hovered (or making it always visible) will provide consumers with better feedback when setting the slider value.

Describe the solution you'd like

Related Code

Additional Information

Describe the feature

We need a Drawer component that consumers can use in their projects/apps.

Describe the use case for this feature

Sometimes users or consumers need to display information details from a list without navigating away from it.

Describe the solution you'd like

The drawer should have 3 slots:

• Header or Title
• Body
• Footer

The drawer should be able to slide in/out from a side of the page, the side can be set through a property/attribute (e.g.: placement: 'left' | 'right'. Should we consider the top and bottom as well? (e.g.: https://ant.design/components/drawer).

The user can close the drawer by clicking the X icon on the Header (near the title) or clicking outside the drawer. Still, this behavior should be flexible, meaning that the drawer should allow consumers to set whether the drawer closes when clicking outside (true by default).

The width of the drawer can be customized as well, according to Figma: 320px default.

Events to consider

• open: triggered when the drawer will open
• close: triggered when the drawer will close
• afterClose: triggered after the drawer has closed
• afterOpen: triggered after the drawer has open

Related Code

No response

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54955&mode=design&t=IM6eKno8O3mv7ODZ-1

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

bq-select with multiple property leaks bqClose event emitted by tag when closed.

Expected Behavior

bq-select should stop the propagation of bqClose.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-select").addEventListener("bqClose",console.log)
2. Close a tag

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.2.0

Current Behavior

The side menu does not show the tooltip of the menu items when is collapsed.

Expected Behavior

It should display the tooltip of each menu item on hover when the Side menu is collapsed.

Steps to Reproduce

It can be reproduced in the current storybook (related to the last version released: v1.2.0):
https://storybook.beeq.design/?path=/story/components-side-menu--collapse

Code Reproduction URL

https://storybook.beeq.design/?path=/story/components-side-menu--collapse

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/angular

BEEQ version

1.3.1

Current Behavior

When changing the value of the Slider component in an Angular project, using ngModel, the model does not get updated properly.

Expected Behavior

Using ngModel in the Slider component should guarantee that the model is updated properly when the value changes.

Steps to Reproduce

1. Create an Angular project that uses @beeq/core and @beeq/angular.
2. After setting up the project, add a <bq-slider> to the template:

export class AppComponent {
  ...
  sliderValue = [25, 75];

  ...

  onSliderChange(ev: CustomEvent<{ value: string | number | number[] }>) {
    console.log('onSliderChange', ev.detail.value);
    console.log('Slider value changed!', this.sliderValue);
  }
}

<bq-slider
  type="range"
  debounce-time="250"
  enable-value-indicator
  [(ngModel)]="sliderValue"
  (bqChange)="onSliderChange()"
  ngDefaultControl
></bq-slider>

3. If we change the slider value, we will see that the model (sliderValue) does not get updated.

Code Reproduction URL

https://codesandbox.io/p/devbox/beeq-with-angular-cs7xxf?file=%2Fsrc%2Fapp%2Fapp.component.html%3A14%2C4

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.1.0

Current Behavior

When using the <bq-dialog> component and enabling the disableCloseEscKeydown, the dialog gets closed.

Expected Behavior

The dialog should not close if disableCloseEscKeydown is enabled.

<bq-dialog disable-close-esc-key-down> ... </bq-dialog>

Steps to Reproduce

1. Go to Storybook: https://storybook.beeq.design/?path=/story/components-dialog--default
2. Enable disable-close-esc-keydown in the Controls panel
3. Press the Esc key
4. The dialog will close when it shouldn't.

Code Reproduction URL

No response

Your Environment

No response

Additional Information

BEEQ package

beeq/react

BEEQ version

1.4.0

Current Behavior

✘ [ERROR] Missing "./dist/components/bq-accordion.js" specifier in "@beeq/core" package [plugin vite:dep-pre-bundle]

node_modules/@beeq/react/src/components.js:5:57:
  5 │ ...ineBqAccordion } from '@beeq/core/dist/components/bq-accordion.js';
    ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

This error came from the "onResolve" callback registered here:

node_modules/esbuild/lib/main.js:1293:20:
  1293 │       let promise = setup({

Expected Behavior

Should not fail.

Steps to Reproduce

1. npm create vite@latest
2. Pick react with typescript with swc
3. cd project && npm i
4. npm i @beeq/{core,react}
5. add this to App.tsx

import './App.css'
import { BqButton } from '@beeq/react'

function App() {
  return <BqButton />
}

export default App

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.4.0

Current Behavior

On range slider when the left thumb gets to the right end the thumb cannot be moved.

Expected Behavior

On range slider when the left thumb gets to the right end the thumb should moved.

Steps to Reproduce

Go to a beeq instance where there is a range slider. Move the left thumb all the way to the right.

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.4.0

Current Behavior

1. Open the Date Picker with Multi-type selection and months set to 2 or more.
2. Begin selecting multiple months.
3. Click on a month in the right calendar.
4. The calendar shifts to the next set of months.
5. The selected months are not visible.
6. Closing and reopening the dropdown is required to see the selection. 👇

Expected Behavior

1. Open the Date Picker with Multi-type selection and months set to 2 or more.
2. Begin selecting multiple months.
3. Click on a month in the right calendar.
4. The calendar should remain on the current set of months, displaying all selected months.
5. The selected months should be immediately visible without needing to close and reopen the dropdown.

Steps to Reproduce

Mentioned above.👆

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/react

BEEQ version

1.2.0

Current Behavior

BqSelect: initial value is not displayed in the input, although the corresponding option is marked as active (as expected).

Expected Behavior

BqSelect: the initial value should be displayed when the component loads.

Steps to Reproduce

function App() {
  const [selectedVale, setSelectedValue] = useState("Active");

  const handleSelect = (
    ev: CustomEvent<{ value: string | number | string[] }>
  ) => setSelectedValue(String(ev.detail.value));

  return (
    <div className="container">
      <p>Selected value: {selectedVale}</p>
      <br />
      <BqSelect
        name="select"
        disableClear={true}
        placeholder="Select a value"
        value={selectedVale}
        onBqSelect={handleSelect}
      >
        <BqOption value="Active">Active</BqOption>
        <BqOption value="Arhived">Arhived</BqOption>
      </BqSelect>
    </div>
  );
}

Code Reproduction URL

CodeSanbox example

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

bq-checkbox indeterminate property is typed as false

Expected Behavior

bq-checkbox indeterminate property is typed as boolean

Steps to Reproduce

In a project that uses typescript and react, paste the following snippet

      <BqCheckbox indeterminate></BqCheckbox>

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

When upper value is max value, upon changing lower value it is getting updated to max value.

Expected Behavior

Lower value should not be updated to max value.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-slider").value= JSON.stringify([30, 100])
2. document.querySelector("bq-slider").value= JSON.stringify([31, 100])

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

BEEQ package

beeq/core

BEEQ version

1.2.0

Current Behavior

The slider component cannot be set to 0 value. When dragging the thumb down to 0, it gets stuck on 1 but never riches the 0 value.

Expected Behavior

Able to set the slider value to 0, even by dragging the slider thumb.

Steps to Reproduce

It can be reproduced in Storybook: https://storybook.beeq.design/?path=/story/components-slider--single&args=value-indicator:!true

1. Enable value-indicator attribute
2. Drag the slider thumb down to 0

Code Reproduction URL

https://storybook.beeq.design/?path=/story/components-slider--single&args=value-indicator:!true

Your Environment

No response

Additional Information

BEEQ package

beeq/core

BEEQ version

latest

Current Behavior

When expanding or collapsing an Accordion item, the animation seems a bit weird and is not as smooth as it should be it is like the text gets displayed some milliseconds before the accordion body content expands.

Expected Behavior

The animation should be smooth, with no content overlap, and no quirk or jump. Something similar to this code pen:
https://codepen.io/giana/pen/OrpdLK

Steps to Reproduce

The current issue can be also checked on the officiant documentation:
https://www.beeq.design/3d466e231/p/713eae-accordion/b/155c3d

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

Describe the feature

I would like to have the possibility to select multiple options on the <BqSelect> component.

Describe the use case for this feature

Sometimes projects require having a multiple selection for use cases like filters.

Describe the solution you'd like

With the addition of a new property: multiple we could set a slightly different behavior for the select to allow multiple selections. On each selection, a tag is shown to display the text of the option selected. We could also delimit how many tags to show and display a +n after that.

Related Code

No response

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=6614%3A36113&mode=design&t=WKqJqQpUSFH3Isug-1

Describe the feature

Describe the use case for this feature

Describe the solution you'd like

Try to use the native progress HTML element under the hood
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Check the article below for applying custom styles:
https://nikitahl.com/progress-bar-css

Related Code

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54962&mode=design&t=IM6eKno8O3mv7ODZ-1

Remove usage of Env from @stencil/core. Functionality is covered by setBasePath utility function

BEEQ package

beeq/core

BEEQ version

1.3.1

Current Behavior

When setting text alignment in a container that has inside a BqSlider component, the layout of the slider breaks since the alignment gets reflected also in the slider content (eg. in the span elements used under the hood).

<div style="text-align: center;">
  <BqSlider type="range" value={[40, 80]} />
</div>

Expected Behavior

The Slider layout should be consistence regardless of the container style applied.

Steps to Reproduce

1. Open Beeq Storybook and to the Slider range example.
2. Open the Browser Devtools and set a text-alignment: center in the div container that holds the <bq-slider>

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response