Release notes ​

...

1.3.0 ​

1.2.0 ​

1.1.0 ​

1.0.0 ​

Beta phase - 0.x.x ​

0.6.0 ​

0.5.0 ​

0.5.1 ​

  • 🪲 Fixes:
    • Fixed visuals of RadioSelect.
    • Nested parsing fixed.
    • Carousel min. height and better slides amount acquisition.
0.5.2 ​

  • 📄 Documentation:

    • Info about the use of WebComponents for SSR.
    • Params show now the slot name in the table.
    • Information and results of the visual an functional tests is now available per browser:

  • ⚠️ Breaking changes!:

    • Inputs no longer use label as the default placeholder.

  • 🆕 New features:

    • WebComponent inputs emit restarted on reset().
    • change()event for Angular inputs will bubble.
    • CDN WebComponents will now use CDN@zurich/dev-utils helpers.
    • New functions in @zurich/dev-utils.
    • Setup for functional automated testing for WebComponents.
    • Setup for visual automated testing for WebComponents.
    • Setup for visual automated testing for CSS Components.
    • More flexible button options for config.
    • Main packages have now an export /info with data about the package.
    • Alert can now hide the close button.
    • All props in components are now optional to avoid problems with the rendering, async props, wrong config, or an incorrect use of the component. The lack of props will be handled by the component.
    • @zurich/css-components includes now the some React components inspired in the Vue Playground components to provide another alternative for Next.js SSR or React apps.

  • 🪲 Fixes:

    • Not defined WebComponents won't be shown.
    • More semantic tokens reviewed for components.
    • Separate React helpers to allow use of some WebComponent directly for SSR.
    • Pagination size adjusted.
    • Chip readonly now working in Angular.
    • Tag icon now working in Angular.
    • Fixed placeholder for inputs.
    • Fixed images onerror loop and cross-origin.
    • Fixes in documentation.
    • Disabled option for RadioSelect.
    • linear as default config in ProgressBar.
    • 1 as default shape in Shape.
    • Inputs reset of help text on no longer invalid.
0.5.3 ​

  • ⚠️ Breaking changes!:

    • Undefined component only hidden if specified with z-no-undefined attribute in body.

  • 🪲 Fixes:

    • fill assignation in Icon
    • Size of secondary and link Button
    • Tag layout width.
    • Fixed JSON.parse error in Angular components
    • Fixed WebComponents wrappers for Vue and React with dependencies' problems.
0.5.4 ​

0.5.5 ​

  • 📄 Documentation:

    • Change documentation disposition.
    • Partial substitution of StackBlitz per CodeSandbox.
    • Customization added to Playgrounds. Instance customization will be now parsed.

  • ⚠️ Breaking changes!:

    • z-theme implicit change of color and background will only work with container tags: <div>, <article>, <section>, <main>, <body>, <aside>, <header>, or <footer>.

  • 🆕 New features:

    • React WebComponents are now capable of using JSX as attributes if they are capable of being slotted.
    • Avatar has now more slotted options.
    • Stage has default slot and content attribute.
    • label slot for CheckboxSelect and CheckboxGroup.
    • Figma plugin now usable in VSCode. Full functionality requires DevMode.
    • Accessibility PoC concept for visual evaluation in dev-mode.

  • 🪲 Fixes:

    • More semantic tokens reviewed for components.
    • Issues with slots for frameworks.
    • Fixed Profile backgrounds.
    • Fixed value parsing in Vue wrappers for non-model-based components.
    • Fixed some errors with React events.
    • Fixed types acquisition for Vue and React.
    • Simplified React wrappers.
    • Model of Accordion.
    • Select not working if name not provided.
0.5.6 ​

  • 📄 Documentation:

    • More components documentation
    • Everything about UX/UI guidelines will now stay in the ZeroHeight documentation. These docs will only reference those guidelines when required.
    • Open in CodeSandbox option in Web and CSS Playgrounds.
    • Dynamic binding in code examples
    • Fixes in the code examples and JSX parsing.

  • ⚠️ Breaking changes!:

    • Social media icons have been removed. They will be available under a new component SocialMediaIcon. These are not suitable for changing colors and preserve the original branding ones.
    • value for non-model-based components changed to amount (Number and Currency), date (Date), time Time, and percentage ProgressBar.
    • Development CSS tooling will require an explicit import for performance (dev.css).

  • 🆕 New features:

    • z-flex admits now col as a shortcut for column.
    • spread option for wide Button.
    • dataList param of NumberInput and TextInput as slotted configuration.
    • Added special use cases of Button.
    • Slotted <z-shape> for Promo and Stage.
    • Link gets an underline if it's used inside a <p> tag to follow guidelines.
    • Icons in Tabs.

  • 🧩 New components:

  • 🪲 Fixes:

    • Minor fixes in React type acquisition.
    • Error emitted on inputs.
    • Default custom tokens values.
    • Fixed priority of slotted configurations.
    • Fixed some attributes not passed in Angular components.
    • Fixed Tooltip positioning.
    • Fixed Skeleton customization.
    • Fixed ChipsSet shaped and dark visuals.
    • Fixed popover-target for Button.
    • Fixed React events sometimes blocking the thread and breaking the component.
    • Fixed decimals in localized Number.
    • Fixed Pagination snapping and double selection.
    • Fixed container spreads in Angular.
0.5.7 ​

  • 📄 Documentation:

    • Some corrections in RL references

  • 🪲 Fixes:

    • Error with files missing in the CDN.
0.5.8 ​

  • 📄 Documentation:

    • Playgrounds use slotted configs as default samples.

  • 🆕 New features:

    • pattern added for some inputs.
    • Carousel now emits change event.
    • Footer has now social-text property.
    • Image accepts now sources and slotted <img> tags.
    • min-length in TextInput

  • 🪲 Fixes:

    • Fixed false attrs affecting Vue components' style.
    • Fixed resizable in Resizer.
    • Better Textarea elastic behavior and styles solved.
    • Fixed Footer social icons not showing.
    • Fixed Angular EmptyState not receiving most properties.
    • Fixed Angular ProgressBar not receiving status.
    • Fixed Angular components not receiving readonly.
    • Fixed type import in @zurich/dev-utils.
    • Fixed copyright styling for Image.
    • Fixed CSS Tag not showing the icon.
    • Fixed touchpad not working with some components.
    • Fixed width for Image when using caption.
0.5.9 ​

  • More images from BlueRoom available, and added to the Figma plugin (now more than 2.700).

  • 📄 Documentation:

    • Components status is back.
    • Images search fixed.
    • Relative path in CDN self-imports for better performance.
    • New paths and new reporter for tests reports (still WIP):

  • ⚠️ Breaking changes!:

    • value for model-based components changed to model.
    • Editable feature WebComponents removed. Slots can be used instead.

  • 🆕 New features:

  • 🪲 Fixes:

    • Accordion binding.
    • Fixed types for React CSS components.
    • Fix in invalid assignation loop and clarifications added to the documentation.
    • Flags management in Angular wrappers.
    • Angular components updated to version 18.1.0.
    • Fixed slotted styling of Angular ButtonGroup.
    • Fixed readonly in Angular.
    • Improvements in Vue and React event typing.
    • By removing the editable feature, most React components are now more SSR friendly.
0.5.10 ​

0.5.11 ​

  • 🆕 New features:

  • 🪲 Fixes:

    • portrait SCSS mixins.
    • TimeInput and DateInput expands again with the parent.
    • DateInput's Calendar expands with the input. custom-ui will set a min-width of 16.25rem to accommodate the Calendar.
    • Fixed edge cases of Calendar matrix rendering.
    • Removed warnings for unrecognized tags with Vite.
0.5.12 ​

0.5.13 ​

  • 📄 Documentation.

    • Fixed splats in redirections.
    • Improved performance.

  • 🆕 New features:

    • Added first-weekday to DateInput for Calendar customization in custom-ui.
    • Added with-search to Select.
    • Fallback to value in options provided for slotted configs. text is now optional.
    • More currencies available.
    • Added config for AvatarList
    • Added borderless for Accordion
    • Highlighting options for Table

  • 🪲 Fixes:

0.5.14 ​

0.5.15 ​

  • 📄 Documentation.

    • Performance improvements.
    • Examples for reset() method in input components.

  • ⚠️ Breaking changes!:

    • Individual imports of Vue and React WebComponents no longer use /dist/.

  • 🪲 Fixes:

    • Intellisense error with React wrappers for components with no slots.
    • Fixed reset() method in some input components.
    • Better types for React components.
    • Proper sorting and typing for CSS framework components.
    • Modal and Sidebar slot specificity.
0.5.16 ​

  • 📄 Documentation.

    • Performance improvements.
    • Examples of use in Next.js.
    • CSS implementation selector in docs.

  • 🆕 New features:

    • id and className props in React wrappers.
    • CJS builds for Next.js.
    • reset() for Form.
    • getLoremPicsum helper function
    • Some extra slots as properties in React WebComponent wrappers.

  • 🪲 Fixes:

    • z-theme and slot in framework CSS wrappers.
0.5.17 ​

  • 📄 Documentation.

    • Documentation about how to localize the components in detail.
    • Some docs fixes with missing imports.
    • Preparation con CSS framework wrappers docs.

  • 🆕 New features:

    • New improved and more optimized mechanism for locales.
    • Slotted images in CSS framework wrappers.
    • CSS Vue and React components no longer require explicit CSS imports per component.
    • ::part selectors in most WebComponents.
    • Locales translations in CDN.
    • eager flag for Image.

  • ⚠️ Breaking changes!:

    • The localization mechanism require the explicit load of the locales.
    • The mechanism for slotted images has changed a bit for WebComponents.
    • CSS Image requires to use the <picture> tag.
    • ProgressBar status variants set as invalid and highlight flags.

  • 🪲 Fixes:

    • SCSS functionalities are back in @zurich/dev-utils.
    • Build path of Vue CSS components.
    • Images are now properly slotted (no config-based).
0.5.18 ​

  • 📄 Documentation.

    • Added parsers for Vue and React CSS components.
    • Some improvements in the documentation of the components.

  • 🆕 New features:

    • no-counter flag for TextInput
    • Inputs can use min and max as overrides of range.

  • ⚠️ Breaking changes!:

  • 🧩 New components:

  • 🪲 Fixes:

    • Performance improvements in Angular inputs.
    • Fixed round Button when no config is used.
    • Fixed the invalid appearance of inputs when required. Now only set if they are touched.
    • Fixed the required logic, decoupled now from validation.
    • Fixed the max-length not working in open loop.
    • Fixed small glitch with boolean inputs.
    • Using aria-invalid instead of data-invalid flag for better a11y.
    • Popover API backdrop color.
0.5.19 ​

  • 📄 Documentation:

    • Optimization in imports use.
    • Updated figma IDs.
    • Related components updated.
    • Parameters section moved to component's guidelines.
    • Implementations links added to component's guidelines.
    • Some thumbnails in CDN.
    • Performance improvements.
    • No search engines indexation for examples.
    • Updated version of VitePress to 1.5.0.

  • 🆕 New features:

    • Navigation new configs and contents.
    • locale for Loader.
    • Added onBlur for most React and Vue WC inputs .

  • ⚠️ Breaking changes!:

    • CSS Stage and StageBanner uses now the <aside> tag instead <picture> for the elements positioning.
    • We reworked the tags of Navigation in CSS for better UX adn responsiveness.

  • 🪲 Fixes:

    • Select required validation.
    • Chain of validation in inputs for internal validations too.
    • InputGroup output width.
    • SocialMediaIcon icon token acquisition for CSS and separation of design tokens.
    • Profile image fallback.
    • Navigation responsiveness.
    • AvatarList slotted overflow.
    • Performance improvements when using images.
    • Fixed sizing issues in iod iOS with boolean inputs.
    • Range errors in DateInput datetime-local type.
    • Size pixel adjustments in inputs and buttons.

0.4.0 ​

0.4.1 ​

  • 🆕 New features:

    • 🆕 badge added to new components of current minor version.
    • Angular form components can now use reactive forms.

  • 🪲 Fixes:

    • Fixed reflect attribute issue with boolean inputs.
    • Fixed value assignations for some inputs.
    • Fixed events for WwbComponent inputs in React.
    • Fixed missing custom to props in some Angular components.
    • Typing improvements in Angular components.
    • Fixed ZurichImage cropping mechanics.
0.4.2 ​

  • 🆕 New features:

    • More images from BlueRoom available (+300).
    • New images also added to the Figma plugin.
    • Figma plugin injects also the BlueRoom images as paint styles on selection.
    • WC Promo and Stage can now modify their Shapes or remove them.
    • ZurichImage values in the image-src attributes of web components can be used.
    • You can now define quality and rotate for the ZurichImage.
    • ZurichImage can infer retina screens to improve the image quality.
    • 📱 badge added to components with React native implementation.

  • 🪲 Fixes:

    • WC Shape has better theme mechanics.
    • Fixes in variables overrides for dark theme.
    • Disableable Calendar.
    • Fixed event of ProgressTracker in React.
    • Optimization in CSS for fonts.
    • ES6 compilation of @zurich/dev-utils for better compatibility.
    • Improvements in the compilations of @zurich/design-tokens
    • Better dependency chain in the installation of packages
0.4.3 ​

  • 🪲 Fixes:
    • CDN re-routing for Zurich images fixed.
    • Missing props in some Angular components.
    • Issue with the root for the Zurich images.
    • Missing playground parsers.
    • Button disabled style.
    • Typing for custom attribute in Angular components.
0.4.4 ​

  • 📄 Documentation:

  • 🆕 New features:

    • New presentation video.
    • ArticleCard and ActionCard components have now the pre-line option.
    • Common agnostic slots approach for the web components following the HTML standard.

  • 🪲 Fixes:

    • Some fixes fix custom typing.
    • Angular rendering in docs.
    • Headings in examples.
    • Dark modes of Badge.
    • Accordion effects.
    • Avatar background color change in docs
    • SegmentedControl click hit-box.
    • SegmentedControl dark mode.
    • Sidebar background for dark mode
    • Tabs dark mode selected
    • WC Inputs initial invalid only when required and dirty or explicitly invalid.
    • Internal states for CheckboxGroup and Select.
    • Shapes fixed for glitches and themes.
    • Fix default Shapes theme for Stage and Promo.
    • RadioSelect selected dot color in invalid and dark.
    • Backgrounds for Angular components on dark theme.
    • Tooltip CSS bottom-left & top-left positions fixed.
    • custom prop in React.
    • Some React components properties passing when the property was an object.
0.4.5 ​

  • More images from BlueRoom available, and added to the Figma plugin (+350).

  • 📄 Documentation:

    • Info about the available slots in the WebComponents.

  • ⚠️ Breaking changes!:

  • 🆕 New features:

    • Components adjustments for SSR.
    • custom-str attribute in WebComponents for easier config.
    • popover APIs for Button and Card.
    • Slotted options for Select.
    • Slotted summary for Accordion.
    • Button as-submit option.
    • cross-origin attribute added for images.
    • Self closing Sidebar and Modal.
    • icon for Tag.
    • TimeInput with-seconds flag.

  • 🪲 Fixes:

    • Review of the Button for current design matching.
    • Added propagation of onblur event.
    • Better mechanism for required inputs validation.
    • Calendar exports.
    • TimeInput value pads.
    • Slider glitch on min set.
    • Promo shape rendering and narrow configuration fixed.
    • help-text for Inputs dark mode.
    • Dark theme for AvatarList, Toast and Alert.
    • Checkbox & Switch double opacity issue for disabled fixed.

0.3.0 ​

  • 📄 Documentation.

    • Playgrounds can now change the global locale when required.

  • ⚠️ Breaking changes!:

    • In order to ensure consistency, respect the standard and avoid rendering problems, we have transformed all the attributes and properties casing to kebab-case.
    • Isotype component renamed as SmilingZ.
    • APIs of SmilingZ and Logo have changed.
    • Easier CSS implementation for SafeSpace and SegmentedControl.

  • New resources available: the @zurich/dev-utils package now provides SCSS variables for Icons and Pictograms.

  • 🧩 Revamped components:

  • 🧩 New components:

  • Additions:

  • 🪲 Fixes:

    • Fixes in documentation images and optimization.
    • Fixes in the icon masks.
    • Fixes with icon fallbacks.
    • Better components customization.
    • Fixes with inputs' hit-boxes.
    • Fixed Time component for frameworks.
    • Fixes in the slotted version of some web components.
    • Fixes in CDN import chain.
    • Fixes in Web Components isolated use.
    • Fixes with React dependency.
    • Fixed icon size for Badge.
    • Fixed sizes for Button.
    • Lighter implementation for SmilingZ, Logo, and Profile.
    • Fixed Shape flip in WebComponents.
    • Fixed SegmentedControl errors.
0.3.1 and 0.3.2 ​

  • Fixed issue with the DNS address pointing to the stage environment.
0.3.3 ​

  • The default documentation page of the component is now the Guidelines. Code is nested under this one.

  • @zurich/dev-utils exports now code parsers and types for the components.

  • New languages added to locales.

  • General refactor done for better performance and typing.

  • 📄 Documentation.

    • Layout foundations documented
    • New HTML isolated examples of use for CSS and WebComponents.
    • Events for components documented.
    • Embed Figma library references (requires Figma account).

  • ⚠️ Breaking changes!:

  • 🪲 Fixes:

    • Better code parsing for samples.
    • Fixed Shape as CSS component.
    • Fixed Textarea appearance.
    • Fixed Profile fallback images and parser.
    • Fixed Badge WebComponent icon injection.
0.3.4 ​

  • Fixed issue with installation of packages.

  • Clarifications of the Inputs localization.

  • Explanation for the use of complex attributes in HTML with Web Components.

  • 🆕 New features:

    • Boolean Inputs implement checked now, with prevalence over value.

  • 🪲 Fixes:

    • Fixed CDN dependency chain for Web components.
    • Added missing configurations of the input components.
    • Visual glitches of Inputs.
0.3.5 ​

0.3.6 ​

  • 📄 Documentation:

    • Layout and content improvements in the guidelines' documentation.
    • Better HTML examples.

  • 🆕 New features:

  • ⚠️ Breaking changes!:

    • just-weekday of Date changed to with-weekday to match the API.
    • config as only attribute for Logo.
    • Logo and SmilingZ follow the z-theme schema.

  • 🪲 Fixes:

    • Fixes in layouts of all Inputs.
    • Small fixes in many Atoms.
    • Fixed issues of Profile.
    • Fixed sizes of CSS Icon.
    • General fixes in visuals of components.
    • Easier import mechanisms.
    • Fix when importing Angular components in @zurich/web-components.
    • Imports also refer to the necessary styles.
0.3.7 ​

  • New icons available.

  • 📄 Documentation:

    • WebComponents and CSS implementations docs separated.
    • Step by step construction indication for the CSS components HTML.
    • More consistent CSS code examples.
    • Code examples for CSS Components.
    • Simplified parametrization using editable components.

  • ⚠️ Breaking changes!:

    • accordion-size of Accordion changed to config.
    • state of Toast changed to config.
    • icon-left of Button changed to icon-right.
    • RadioSelect CSS version uses now fieldset.
    • Dropdown renamed to to ActionMenu.
    • Button alert variant removed.
    • SafeSpace config attribute order changed.
    • Tag color attribute changed to fill.

  • 🆕 New features:

  • 🪲 Fixes:

0.3.8 ​

  • Improvements in the bundling and optimization of the components.

  • Locals assets in packages for JSDocs.

  • 📄 Documentation:

    • Code examples for WebComponents.
    • More detailed explanations about params for WebComponents.
    • Slots documentation.

  • 🆕 New features:

    • Named slots option for Web Components.
    • Breakpoints SCSS tooling.
    • Custom card shadows.
    • Visibility toggle forPasswordInput added.
    • Test approach for BlueRoom integration.
    • Button has now link capabilities.

  • ⚠️ Breaking changes!:

    • SegmentControl model uses now string.
    • Icon z-icon property partially changed to icon (for optimization).
    • icon attributes for outlined version changed from :outline to :line for optimization.
    • Pictogram dark version is set in the pictogram property and not from z-theme.
    • CDN outlined icons now end with --o.svg instead of --outline.svg for optimization.
    • m is now defaults size for Inputs.

  • 🪲 Fixes:

    • Fixed framework selector for mobile resolutions.
    • Shape background.
    • z-layout for mobile.
    • z-theme chain for WebComponents.
    • Size for Inputs properly implemented.
    • readonly visuals for inputs.
    • React events for Button and Chip.
    • Adjusted implementation of Modal to avoid backdrop problems.
0.3.9 ​

  • 🪲 Fixes:
    • Fixed Illegal constructor issue with Angular components.
    • Fixed z-theme and editablefor Angular components.
    • FixedPasswordInput label behavior.
    • Accordion custom tokens.
0.3.10 ​

  • Docs using Vitepress 1.1.0.

  • ⚠️ Breaking changes!:

    • Angular components using two-way data binding change the name of the property from value to ngModel to match the standard.

  • 🪲 Fixes:

    • Improvements in deployment times.
    • Fixed bug with update in WebComponents for checked inputs. This comes from a CSS bug.
    • Fixed layout scaling for RadioSelect.
    • Fixed Form config spread.
    • Content issue in Modal WebComponent.

0.2.0 ​

  • 📦 New packages:

  • 📄 Documentation.

  • Changes:

    • Vue components use zv-as prefix to avoid recursion problems.
    • @zurich/web-components and @zurich/css-components/styles.css no longer require the import of @zurich/design-tokens
    • @zurich/design-tokens/index.css and @zurich/css-components/index.css imports simplified to @zurich/design-tokens and @zurich/css-components
    • ZurichSans as default font in @zurich/design-tokens with fallbacks.

  • 🪲 Fixes in @zurich/web-components:

    • v-model working form Vue components.
    • Fixed the compilation of the assets gathering per environment for the WebComponents
    • Fixed the compilation of the Angular components.
    • Fixed the compilation of the Vue components.
    • Fixed the types for Angular components.
    • Fixed the types for Vue components.
    • Optimizations in the compiled files.
0.2.1 ​

  • 🧩 Component implementations for @zurich/react-native:

  • ⚠️ Breaking changes!:

    • React components use Zr as prefix to avoid recursion and render problems.

  • 🪲 Fixes in @zurich/web-components:

    • React inputs onChange and onInput callbacks properly working for all.
0.2.2 ​

  • 🧩 Component implementations for @zurich/react-native:

  • 🪲 Fixes:

    • Better routing in the documentation.
    • Documentation routing aliases added.
    • Version indicator in nav bar.
    • Type fixes for @zurich/design-tokens.

  • 🪲 Fixes in @zurich/web-components and @zurich/css-components:

    • Fixes in several CSS properties and customization.
    • General optimization of the CSS.
    • Fixed issues with Angular for slotted variants.

  • 🪲 Fixes in @zurich/react-native:

    • Fixed types for TypeScript.
    • Fixed ZrThemeProvider name.
    • Added explanation for ZrThemeProvider in docs.
0.2.3 ​

  • 🆕 New features:

    • You can now use JSX Elements inside some of the attributes of @zurich/web-components/react components. Check the info here

  • 📦 New packages:

  • 🪲 Fixes:

    • Corrections added in the documentation for the Vue 2 compatibility mode.
    • More styling and CSS properties corrections.
    • More custom properties added.
    • Fixes in the spread of semantic tokens.
    • Fixes in the Profile and SafeSpace components with the fallbacks.
    • Dark mode for Logo and Isotype components.
    • Fixed Rating component.
    • Several events fixed for input components.

0.1.0 ​

0.1.1 ​

  • 🪲 Fixes:

    • Fixes with the CDN and the routing
    • Major fixes with the versioning of packages
0.1.2 ​

  • 🪲 Fixes:

    • Solving Angular rendering in deployment environments
    • Fix SegmentedControl for frameworks.
    • Fix disabled for NumberInput
    • Fix some theming issues for inputs.
    • Fix documentation typos.