v0.51.1

0.51.1 (2024-05-08)

Bug Fixes

• sbb-toggle: fix event timing (#2646) (6da2d26)

v0.51.0

0.51.0 (2024-05-07)

⚠ BREAKING CHANGES

• As we split up the former typography.css into smaller consumable modules, we had to change the names of some files.
  • Renamed typography.css to standard-theme.css. Notice: there is still a file called typography.css that contains only a few typography-related outputs. Therefore, import adaption from typography.css to standard-theme.css is mandatory.
  • Changed the name of fullfont.css to font-characters-extension.css.
• Replaced Roman, Bold, and Light font-face variants with the single SBB font. Using CSS font-weight property automatically selects the correct font family. Migration guide:
  • Replace font-family: "SBBWeb Roman", ... with font-family: "SBB", ... and use font-weight: normal (potentially not necessary as normal is the default).
  • Replace font-family: "SBBWeb Bold", ... with font-family: "SBB", ... and use font-weight: bold or CSS class sbb-text--bold.
  • Replace font-family: "SBBWeb Light", ... with font-family: "SBB", ... and use font-weight: 300.
  • Replace CSS variable --sbb-typo-type-face-sbb-roman with --sbb-typo-font-family and use font-weight: normal (potentially not necessary as normal is the default).
  • Replace CSS variable --sbb-typo-type-face-sbb-bold with --sbb-typo-font-family and use font-weight: bold.
  • Replace CSS variable --sbb-typo-type-face-sbb-light with --sbb-typo-font-family and use font-weight: 300.
• alert: Removed disable-animation property. Use animation='none' instead.
• notification: Removed disable-animation property. Use animation='none' instead or depending on the case 'open' or 'close'.
• disable-animation: Add the sbb-disable-animation CSS class to disable animations for the element and all its children. Consequently, all disable-animation properties of the following components have been removed.
  • Removed disable-animation property from sbb-accordion
  • Removed disable-animation property from sbb-alert
  • Removed disable-animation property from sbb-autocomplete
  • Removed disable-animation property from sbb-datepicker-toggle
  • Removed disable-animation property from sbb-dialog
  • Removed disable-animation property from sbb-expansion-panel
  • Removed disable-animation property from sbb-image
  • Removed disable-animation property from sbb-loading-indicator
  • Removed disable-animation property from sbb-menu
  • Removed disable-animation property from sbb-navigation
  • Removed disable-animation property from sbb-navigation-section
  • Removed disable-animation property from sbb-notification
  • Removed disable-animation property from sbb-overlay
  • Removed disable-animation property from sbb-popover
  • Removed disable-animation property from sbb-select
  • Removed disable-animation property from sbb-selection-panel
  • Removed disable-animation property from sbb-sticky-bar
  • Removed disable-animation property from sbb-toast
  • Removed disable-animation property from sbb-toggle

Features

• add default entries for style exports in package.json (#2643) (73271e2)
• add root entry point with global component registration (#2641) (3572fa9)
• alert: add animation property (#2507) (8b91eb8)
• notification: add animation property (#2507) (8b91eb8)
• notification: add size 's' (#2606) (cf97ecd)
• reduce font-faces to the single SBB variant (#2618) (679d9e9)
• sbb-accordion, sbb-expansion-panel: add size s (#2603) (015201d)
• sbb-alert: add size s (#2591) (3a82c67)
• sbb-container: allow expanded background color (#2640) (2854e8e)
• split CSS outputs into smaller modules (#2615) (646e5a4)

Bug Fixes

• enable next.js 14 support and add some upstream fixes (#2613) (341b7ce)
• prefix all css variable names (#2609) (788cef7)
• sbb-container: fix background color for nested containers (#2611) (c9f0e0e)
• sbb-dialog: show all content if header is always present (#2637) (924fa37), closes #2635
• sbb-image: fix alt attribute and provide css var for aspect-ratio (#2607) (54d3192)
• sbb-loading-indicator: fix sizes of loading indicator (#2630) (a1270b2)
• sbb-tab-group: avoid unwanted margin block spaces (#2628) (87d10d8)

Code Refactoring

• disable-animation: migrate disable-animation mechanism (#2507) (8b91eb8)

v0.50.2

0.50.2 (2024-04-16)

Bug Fixes

• adapt lyne tokens change (#2582) (94bf4f0)
• adapt react package import paths missed during migration (#2589) (0781c6a)
• sbb-overlay: consider sbb-overlay as overlay in inert mechanism (#2588) (4ecc125)
• sbb-teaser-hero: use auto hyphens for title text to avoid overflow (#2581) (3b8844c)

v0.50.1

0.50.1 (2024-04-15)

Bug Fixes

• update import paths missed in the migration (#2579) (9c90fa8)

v0.50.0

0.50.0 (2024-04-11)

⚠ BREAKING CHANGES

• The entry points for the @sbb-esta/lyne-components have changed from extension-less to including the extension (e.g. @sbb-esta/lyne-components/button to @sbb-esta/lyne-components/button.js).
• sbb-dialog: The sbb-dialog component now needs the dedicated inner elements sbb-dialog-title, sbb-dialog-content, and sbb-dialog-actions. Use these components to respectively provide a title, a content and, optionally, a footer with an action group. Moreover, the full-screen variant (which occurred when no title was provided to the dialog) has been removed. To achieve a full-screen overlay, please use the new sbb-overlay component. As a migration help, consider the following example. Old: <sbb-dialog title-content="Title"><p>Dialog content.</p><sbb-action-group slot="action-group">...</sbb-action-group></sbb-dialog>. New: <sbb-dialog><sbb-dialog-title>Title</sbb-dialog-title><sbb-dialog-content><p>Dialog content</p></sbb-dialog-content><sbb-dialog-actions>...</sbb-dialog-actions></sbb-dialog>. Previously, a full-screen dialog was displayed if no title was provided to the dialog component: <sbb-dialog><p>Dialog content.</p></sbb-dialog>. To achieve the same, it is now mandatory to use the sbb-overlay component: <sbb-overlay><p>Overlay content.</p></sbb-overlay>.
• Changed several internal class names. Consumers shouldn't be affected.
• sbb-form-field: The css var --sbb-form-field-height has been renamed to --sbb-form-field-min-height.

Features

• button: implemented size 'S' (#2544) (396d4dc)
• provide full font characters set as alternative (#2573) (4047883)
• sbb-form-field: support the textarea inside the <sbb-form-field> (#2506) (f8316f0), closes #2497
• sbb-overlay: extract sbb-overlay component from dialog (#2477) (5ea4fb7), closes #2476 #2470
• sbb-sticky-bar: allow configuration of z-index (#2566) (20a98b2)
• update size tokens (#2551) (74d8929)

Bug Fixes

• fix boolean handling in react wrapper (#2547) (e4ba04b)
• sbb-calendar: align month view label (#2564) (0215e00)
• sbb-dialog: fix accessibility with option to hide the header on scroll (159f536)
• sbb-dialog: fix z-index (#2572) (374d7b7)
• sbb-form-error: fix internal css variable name (#2558) (cc275af)
• set colspan properly (0215e00)
• use valid import/export syntax (#2563) (585cfc5)

Code Refactoring

• re-structure common behaviors (#2533) (906d576), closes #2534
• restructure entry points (#2575) (3d4c8ab)

v0.49.0

0.49.0 (2024-03-28)

⚠ BREAKING CHANGES

• sbb-form-field: label property and attribute of <sbb-form-field> was removed. Use <label> tag inside <sbb-form-field> to provide the label information. E.g. <sbb-form-field label="Example">...</sbb-form-field> becomes <sbb-form-field><label>Example</label>...</sbb-form-field>
• renamed component sbb-screenreader-only to sbb-screeen-reader-only.
• sbb-calendar: The SbbDatepicker property selectedDate has been renamed to selected. This also applies to the attribute selected-date, which has been renamed to selected. Additionally the DateAdapter (and NativeDateAdapter) have been superficially refactored. An important change is that the month is now 1-based, instead of 0-based.

Features

• implement experimental support for server side rendering (SSR) (#2466) (3abcc68)

Bug Fixes

• fix scrollbar styles for Chrome (#2524) (1266a21)
• sbb-button: remove gap for hidden icons in icon slot (#2526) (433c57c)
• sbb-form-field: remove label property and attribute (#2523) (602064c)
• stories with label bold for sbb-checkbox and sbb-radio-button (#2528) (9e85be5)

Code Refactoring

• rename component name from sbb-screenreader-only to sbb-screeen-reader-only (#2520) (6fbf085)
• sbb-calendar: implement initial support for other date libraries (6d4e9c2)

v0.48.3

0.48.3 (2024-03-21)

Bug Fixes

• sbb-checkbox, sbb-toggle-check: enable attribute mutation after form reset (#2505) (6bd8924)
• sbb-header: fix header shadow on keyboard navigation (#2508) (3eefbea)
• sbb-navigation-section: ensure sbb-active initializes correctly (#2493) (baede50)

v0.48.2

0.48.2 (2024-03-14)

Bug Fixes

• fix button dts files (#2485) (2228a02)
• fix order of class decorators (#2489) (580b56f)
• sbb-navigation: fix navigation actions contrast ratio (#2481) (f605a1e)

v0.48.1

0.48.1 (2024-03-13)

Bug Fixes

• fix unresolved sass imports (#2483) (964ab42)
• sbb-status: fix flex behavior in Firefox (#2479) (92d7492)

v0.48.0

0.48.0 (2024-03-12)

⚠ BREAKING CHANGES

• sbb-navigation: The active property of <sbb-navigation-button>/<sbb-navigation-link> (former <sbb-navigation-action>) has been removed. Add the CSS class sbb-active to the corresponding button/link, to mark it as active. Additionally, whenever sbb-active class is set in navigation, the corresponding navigation section, if one is connected, automatically opens.
• The action element refactoring brings a couple of breaking changes:
  • The following components have been split into two components. One with pure button and one with pure link behavior:
    • sbb-card-action: split in sbb-card-button and sbb-card-link
    • sbb-header-action: split in sbb-header-button and sbb-header-link
    • sbb-menu-action: split in sbb-menu-button and sbb-menu-link
    • sbb-navigation-action: split in sbb-navigation-button and sbb-navigation-link
  • The isStatic flag has been removed from buttons and links; since the static case was automatically detected when action elements were nested in other action elements, now you need to check for usage of nested buttons/links in other action elements and possibly fix them using the new static variants.
  • sbb-button: the variant property has been removed and for each value, a new component has been created (e.g. sbb-button, sbb-secondary-button, sbb-tertiary-button, sbb-transparent-button); each of them has been further divided considering the behavior:
    • If the component was used as a button (no href set), replace it with <sbb{-variant}-button>
    • If the component was used as a link (href set), replace it with <sbb{-variant}-button-link>
    • If the component was nested into another action element (isStatic set), replace it with <sbb{-variant}-button-static>
  • The usage of an icon-only sbb-button in a sbb-form-field is not supported anymore; a new component named sbb-mini-button has been created to handle this specific case
  • Check and replace any sbb-button in sbb-toast with the new sbb-transparent-button/sbb-transparent-button-link, since the variant is not automatically set anymore
  • sbb-link has been split into nine components, based on type and variant:
    • If sbb-link had an [href="..."], it migrates to <sbb{-variant}-link>:
      • <sbb-link href="..."> should be replaced with <sbb-block-link href="...">
      • <sbb-link href="..." variant="block"> should be replaced with <sbb-block-link href="...">
      • <sbb-link href="..." variant="inline" > should be replaced with <sbb-link href="...">
    • If sbb-link did not have an [href="..."], it migrates to <sbb{-variant}-link-button>
      • <sbb-link> should be replaced with <sbb-block-link-button>
      • <sbb-link variant="block"> should be replaced with <sbb-block-link-button>
      • <sbb-link variant="inline"> should be replaced with <sbb-link-button>
    • If sbb-link had an [is-static], it migrates to <sbb{-variant}-link-static>
      • <sbb-link is-static> should be replaced with <sbb-block-link-static>
      • <sbb-link is-static variant="block"> should be replaced with <sbb-block-link-static>
      • <sbb-link is-static variant="inline"> should be replaced with <sbb-link-static>
  • sbb-action-group now only accepts sbb-block-link | sbb-block-link-button besides any <sbb-button> variant
  • sbb-link-list now only accepts sbb-block-link | sbb-block-link-button
  • sbb-skiplink-list now only accepts sbb-block-link | sbb-block-link-button
  • sbb-toast now only accepts sbb-link | sbb-link-button | sbb-transparent-button | sbb-transparent-button-link
  • SASS mixin renamings:
    • link-variables SASS mixin renamed to block-link-variables,
    • link-variables--negative SASS mixin renamed to block-link-variables--negative,
    • link-variables--inline SASS mixin renamed to link-variables,
    • link-variables--inline-negative SASS mixin renamed to link-variables--negative
    • link-inline-consolidation SASS mixin renamed to link-consolidation,
    • link-inline SASS mixin renamed to link,
    • link-inline-negative SASS mixin renamed to link-negative
• color: Removed 'default' suffix from color tokens (e.g. --sbb-color-iron-default => --sbb-color-iron and SbbColorIronDefault => SbbColorIron).
• multiple: rename type TitleLevel to SbbTitleLevel

Features

• button variant refactoring (98ea7f5)
• implement initial support for SSR (#2437) (39d37ca)
• increase --sbb-font-size-title-5 for zero to small breakpoints (#2448) (15b786a)
• sbb-card: introduce new color for active state (#2462) (6553d6b)
• sbb-checkbox, sbb-toggle-check: introduce native form support (#2456) (c9549a1)
• sbb-navigation: remove navigation section divider (#2473) (71c1412)
• sbb-selection-panel: increase border width for active state (#2463) (4c4bf5c), closes #2461
• sbb-sticky-bar: allow overlapping to the following content (#2459) (9518dfd)
• sbb-teaser-paid: first implementation (#2434) (68f807a)

Bug Fixes

• fix imports of common styles (#2475) (fda1960)
• layout: apply max-width only for ultra screen size (#2458) (cce71b2)
• sbb-navigation: fix active and focus handling (#2471) (ea81790)
• sbb-radio-group, sbb-tab-group: avoid incorrect setup if component is invisible during init (#2446) (1586137)
• sbb-selection-panel: fix transition of border-width (#2468) (8300b7f)
• sbb-selection-panel: fix transition of border-width [second attempt] (#2469) (942bf45)
• sbb-status: fix text styling (#2457) (292d316)
• sbb-teaser: prevent overlapping chip if including long content (#2450) (b78b3ce)

Documentation

• multiple: remove undefined type from titleLevel (#2447) (c2532cd)

Styles

• color: remove 'default' suffix from color tokens (77454de)

Code Refactoring

• sbb-navigation: improve active handling and focus (4f8f309)