# @circutor/ui

## 5.1.2

- Fix: Fixed is-loading state in Chip.

## 5.1.1

- Improvement: Navigation now have tooltips when collapsed.

## 5.1.0

- Feature: New icon library based on Phosphor icons. From 174 icons to 1596 icons.
- Fix: Banner text is always left aligned.

## 5.0.9

- Improvement: Textfield and select now only show validation text when is invalid.

## 5.0.8

- Improvement: Subnavigation in compact mode now works on click intead of hover to support mobile.
- Fix: Tooltip size when hovering an icon.
- Fix: Tertiary button is-selected is now extending is-active as default.

## 5.0.7

- Fix: Navigation now have the correct padding when wide and compact.

## 5.0.6

- Improvement: Added navigation 2nd level divider.
- Improvement: Navigation 1st level item now have is-active automatically if a child have it.
- Improvement: Navigation 1st level item no have a mini badge automatically if a child or itself have a badge.
- Improvement: Prototype: Breadcrumb now have ellipsis when overflows.
- Fix: Navigation elements are hidden in compact version without using :not.
- Fix: Select now have is-required state.
- Fix: Select now have right padding for the chevron space.
- Fix: Updated select disabled tokens to the latest version.

## 5.0.5

- Improvement: Navigation 1st level divider is now a span inside a li item.
- Fix: Table sortable state is now deleted.

## 5.0.4

- Fix: Fixed validation elements in textfield and select.
- Fix: Button border radius applied in toggle sidebar button.
- Fix: Minor fixes in icon sizes in the mixins.
- Fix: Mixins now are working on project using custom resources path.

## 5.0.3

- Improvement: Tertiary variant is now a mixin and its used in a button and textfield action.
- Improvement: Added 3 roundness styles for branding customization: sharp, soft, pill.
- Fix: Default resources path uses node_modules (@circutor/ui/recources).
- Fix: Fixed icon position in loader large size modifier.

## 5.0.2

- Improvement: Custom variables now are CSS variables.
- Improvement: Tag now have focus-visible on close element.
- Fix: Tag close button now uses html button tag.
- Test: Default resources path is fixed at '../../resources'.

## 5.0.1

- Improvement: Refactor of Textfield and Select icon elements for consistency.  
- Improvement: Updated Circontrol branding colors.  
- Improvement: Updated bradning size factor to get typography consistency.  
- Improvement: Typography tokens now use EM instead of REM for better scalability.  
- Improvement: Avatar image variant now follows the global avatar structure.  
- Improvement: Added a new config variable to define a custom resources path.  
- Fix: Documentation fixes.  
- Fix: Fixed avatar image paths.  
- Fix: Default paths for typography and icons now uses node_modules.

## 5.0.0

- Major change: Update imports from @import to @use and @forward.
- Major change: Using core or bundle now override config vars using @use with().
- Major change: The config file now supports the "config-brand" option to apply all brand variables at once.
- Breaking: Modal is updated using <dialog>. See documentation.
- Breaking: Avatar now have __text and __icon elements.
- Breaking: Added __close element in banner.
- Breaking: Button no longer supports the ghost variant.
- Breaking: Button no longer supports the is-condensed state. Use the --small size modifier instead.
- Breaking: Button now includes size modifiers: --small, --medium and --large.
- Breaking: Banner no longer supports is-condensed state. The default banner now supports a single text line.
- Breaking: Tag no longer supports is-condensed.
- Breaking: Feedback components no longer support the neutral variant.
- Breaking: Chip now supports the is-loading state.
- Breaking: Select have a new element __chevron that replaces __icon--action.
- Improvement: Navigation now have animation when open and close 1st level items.
- Improvement: Toast now supports a progress bar, hover pause, and close interactions.
- Improvement: Button and Avatar now support grouping.
- Improvement: Links inside a banner now are using feedback colors.
- Improvement: Notice now support is-loading state.
- Fix: Fixed is-danger and is-disabled states combination of primary button.

---

## 4.0.1

### Patch Changes

- 97563db: Autorotate icon spinner-s

## 4.0.0

### Major Changes

- 62c8876: ## A parameter is now used to indicate whether the paragraph token is bold or not.
  --> Replace all cds-paragraph-bold-_ (_ is the size, e.g., s, m, l,...) with cds-paragraph-\*(bold)

  The INTENSE and STRONG tones of the backgrounds no longer exist.

  --> Replace cds-background-intense with cds-background-medium
  --> Replace cds-background-strong with cds-background-deep

  "State" tokens (hover and active) now use a double dash (--hover and --active) after the base token.

  --> Replace all _-hover and _-active with _--hover and _--active respectively.

  Disabled and placeholder text tokens now use tonal tokens. This semantics was inconsistent with the system.

  --> Replace cds-color-text-disabled with cds-color-text-muted
  --> Replace cds-color-text-placeholder with cds-color-text-muted

  The semantics of non-neutral colors have been adjusted. The -base suffix is now -main for all colors.

  --> Replace cds-color-accent-primary-base with cds-color-accent-primary-main
  --> Replace cds-color-accent-danger-base with cds-color-accent-danger-main

  The "inverted" concept has been changed to "inverse."

  --> Replace the cds-inverted mixin with cds-inverse
  --> Replace custom classes using inverted with inverse

  Default modifiers have been defined for all components. If no modifier is specified, the component will render in its default form instead of appearing "broken."

  --> No action required.

  The TAG component has modified its \_\_icon element. The size is reduced from -150 to -100, and the normal close icon must be used.

  --> Replace the "cds-ico-close-tag-solid" icon in the cds-tag\_\_icon element with the "cds-ico-close-circle-solid" icon.

  The naming of some component elements has been unified to ensure system consistency.

  --> Replace the "cds-toast**message" element in the "cds-toast" component with "cds-toast**title."
  --> Replace the "cds-toast**details" element in the "cds-toast" component with "cds-toast**text."
  --> Replace the "cds-tooltip**content" element in the "cds-tooltip" component with "cds-tooltip**text."

  Unstyled heading hierarchy has been added to the reset.

  --> No action required. Just check if H\* tags without classes render as expected.

  A new --large size variant has been created for the "cds-badge" component.

  Updated the upcoming deprecation of SCSS darken/lighten and map-get/map-merge in favor of Sass namespaces.

  --> Example: Using @use "sass:color": darken($cdsbt-neutral-000-dark, 4%) --> color.adjust($cdsbt-neutral-000-dark, $lightness: -4%)
  --> Example: Using @use "sass:map": map-get() --> map.get() and map-merge() --> map.merge()

  The logo space has been adjusted, now providing two slots instead of being configurable via a variable.

  Feedback and alternative colors used MUTED, MAIN, and STRONG. They now use PALE, MAIN, and STRONG.

  --> Replace feedback -muted tokens with -pale.
  --> Replace alternative -muted tokens with -pale.

  The config file has been modified to adapt the CDS to cross-branding.

  --> This requires configuring "circutor" as it is not enabled by default.

  As a result of this change, the color palette is now dynamic.

  --> The base colors for each "brand" are defined in the config.

  $_light-accents: (
      "primary": #E40040,
      "danger": #a9322c
  );
  $\_dark-accents: (
  "primary": #F60845,
  "danger": #a9322c
  );

## 3.4.1

### Patch Changes

- ca0c5ec: New user circutor icon

## 3.4.0

### Minor Changes

- 885bc7b: Layout + Navigation

## 3.3.0

### Minor Changes

- 0dc5ffd: New wifi level icons

## 3.2.1

### Patch Changes

- 1c850ad: New paragraph xs and netto font is included

## 3.2.0

### Minor Changes

- e786005: Add icon typography files

## 3.1.0

### Minor Changes

- dd8ca41: Clean an fix in icons

## 3.0.1

### Patch Changes

- 6802950: New icons link unlink and phi

## 3.0.0

### Major Changes

- 1c28c1e: - Global: IMPORTANT!! Renaming: "warning" terms is now "alert" term.
  - Global: IMPORTANT!! Renaming: "Semantic color token "feedback-info-" is now "feedback-information"
  - Global: IMPORTANT!! Feedback color tokens refactored. Now there are 3 tokens: muted, main & strong.
  - Banner: IMPORTANT!! BEM updated. Update your application or framework!
  - Toast: IMPORTANT!! BEM updated. Update your application or framework!
  - Modal: IMPORTANT!! BEM updated. Update your application or framework!
  - Loader: Component updated. Now is using common spinner icon from CDSIcons to get coherence with all loading states
  - Global: 10 new alternative color palettes in base tokens
  - Avatar: BETA: Now supports alternative colors
  - Tag: BETA: Now supports alternative colors
  - Mixins: New feedback mixins: information, success, alert, error, neutral (Discovery coming soon)
  - Global: Error color is now using one level darker from "sunset" palette
  - Chip: Now include feedback mixins and is-highlighted state (both usable)
  - Toast: Now include feedback mixins and is-highlighted state (default is not usable)
  - Banner: Now include feedback mixins and is-highlighted state (highlighted is no usable)
  - Global: Mixin cds-icon($size) is now cds-icon-size($size)
  - Global: New mixin for components cds-icon($icon)
  - Banner: Added is-condensed state.
  - Chip: Added is-condensed state.
  - Global: Added font-variant-numeric: tabular-nums in global typography.
  - Badge: This no longer applies uppercase by default.
  - Buttondeck: Element **description is now **details

## 2.2.1

### Patch Changes

- b1f9240: padding banner to 16px

## 2.2.0

### Minor Changes

- 24d0442: New variant mixins + new buttondeck

## 2.1.1

### Patch Changes

- e202864: fix loader dimension

## 2.1.0

### Minor Changes

- 68f2461: - Global: Now :focus-visible extends :hover globally
  - Tokens: New tokens for hover and active for background-inverted
  - Textfield: ValidationText element adjusted to fix focus state.
  - Buttons: Now :active extend :hover
  - Buttons: New variants --condensed and --expanded
  - Buttons: New class is-danger in all button variants
  - Buttons: DEPRECATED: --danger variant is now deprecated. Use is-danger instead.
  - Buttons: New class is-selected in all button variants
  - Buttons: WIP: New private customizable variable: \_button-border-radius
  - Banner: Gap adjusted from 100 to 25
  - Avatar: Add --tertiary variant
  - Toast: Border Radii adjusted from 50 to 25
  - Tooltip: Border Radii adjusted from 50 to 25
  - Chips: Icon size adjusted from 200 to 150
  - Icons: Added 15 icons (v.1.8)
  - Icons: (Internal) Icon size now is defined via mixin (w/@mixin cds-icon(size)) instead of using font-size;
  - Table: WIP: Added some utilities is-disabled, is-selected, is-processing (TR) and is-sortable (TH)

## 2.0.3

### Patch Changes

- 92d940f: Fix validation text on textfield

## 2.0.2

### Patch Changes

- afdfe51: fix full widht and height loader molecule

## 2.0.1

### Patch Changes

- e1f97ae: Fixes:

  - fix gap on list component
  - fix badge wrapper text
  - Change name of text element in loader component

  New

  - `is-selected` modifier for secondary button

## 2.0.0

### Major Changes

- 85094c9: Long value support of list molecule

  fix bse prefix in badge atom

## 1.3.0

### Minor Changes

- eaa9018: New list molecule

## 1.2.0

### Minor Changes

- d58772a: adding avatar documentation
- 2046cb4: adding avatar documentation

## 1.1.0

### Minor Changes

- 276bc12: new atoms and refactor notice molecule
  February 5

  Tooltip tokens

  - `$cds-tooltip-s`
  - `$cds-tooltip-m

  New tooltip varian `—tip` (Beta)

  February 6

  New notice variant neutral on notice content (NEW)
  Refactor name on notice(IMPORTANT breaking changes)

  - Change `-codenumber` for `__hero`
  - Change `-title` for `__title`
  - Change `__button-container` for `__footer`
  - Delete `cds-notice__info-container`
  - Add `ads-notice__hero`, `ads-notice__title`

  Example code now:

  ```html
  <div class="cds-notice cds-notice--left cds-notice--error">
    <span class="cds-notice__icon cds-ico-close-circle-solid"></span>
    <span class="cds-notice__hero">500</span>
    <span class="cds-notice__title">Server response error</span>
    <span class="cds-notice__text"
      >Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span
    >
    <div class="cds-notice__footer">
      <button class="cds-button cds-button--secondary">
        <span class="cds-button__icon cds-ico-refresh"></span>
        <span class="cds-button__text">Refresh</span>
      </button>
    </div>
  </div>
  ```

  February 12

  Fix support textile with label and icon

  February 16

  New loader atom

## 1.0.38

### Patch Changes

- bf4ddaf: Toast refactor and fixes

## 1.0.37

### Patch Changes

- 3f08692: New color palette. Adding 75, 150, 925 tones.
  New Badge BSE Component (for dropdowns + navigation).
  (beta) New Button BSE Component (for dropdowns + navigation).
  New Section BSE Component (for dropdowns + navigation).
  (beta) New Dropdown Component.
  (beta) New Select Component.
  Improved Avatar Component. Added Large Size.
  New Icons version 1.7 (up to 134 icons).
  New Overlay as global object.
  Important: Updated semantic tokens. (Full documentation will be provided)
  Important: Renaming chip to tag.
  Important: Renaming status-chip to chip.

## 1.0.36

### Patch Changes

- e2e485d: ui team requirement: sepating scss solid styles from ui styles

## 1.0.35

### Patch Changes

- b34b8de: fixing responsiveness in pagination

## 1.0.34

### Patch Changes

- 1fae1aa: Modal max height and scroll fixed

## 1.0.33

### Patch Changes

- 2a896c3: add cds pagination component

## 1.0.32

### Patch Changes

- dc289f3: New features and refactors

## 1.0.31

### Patch Changes

- bf15b00: add toast component
- b2fea23: feat: new size to toolbar atom / small - medium

## 1.0.30

### Patch Changes

- 49cbf59: feat: new notice component

## 1.0.29

### Patch Changes

- 416f122: fix color root

## 1.0.28

### Patch Changes

- 0e76c6e: New components and color variables
- 48e7b9d: New components + new icons

## 1.0.27

### Patch Changes

- 4093498: header button to show sidebar fixed

## 1.0.26

### Patch Changes

- 9899d16: Unified switch component

## 1.0.25

### Patch Changes

- e8dd91d: Fixed max-heigth on bcards and fixed ms-reveal on inputs.

## 1.0.24

### Patch Changes

- b74eba6: New icons, new button card, global refactor

## 1.0.23

### Patch Changes

- 528c3d5: Fix default icon size to 1.5rem
- 91ce5a6: Fix icons prefix collision

## 1.0.22

### Patch Changes

- ff4635f: Inputs, tooltips and full restructure UI project

## 1.0.21

### Patch Changes

- dc96432: Added 70 icons. Updated to CircutorIcons v1.3. Minor bg fixes.

## 1.0.20

### Patch Changes

- 206723c: Custom vars implementation

## 1.0.19

### Patch Changes

- 6fba950: (ui) Removed transitions
- add changesets

## 1.0.18

### Patch Changes

- add build script

## 1.0.9

### Patch Changes

- 5d9b120: Minor changes on css format.
