Changelog

Latest changes for Webcore

Here you can find a summary for all of our changes made for Webcore in chronological order.

• v0.10.0

  Introducing templates, along with Svelte 5 and React 19 updates. In this release, we focused on making our existing components more accessible, usable, and fixed several bugs. We made several accessibility improvements that you can find below.

  What’s new?

  • ⬆️ Updated React to the latest version (v19.0)
  • ⬆️ Updated Svelte component to new Svelte 5 syntax da0a362
  • ✨ Added Layout and SEO blocks 8b50b54
  • ✨ Added Portfolio and Product Page templates 22d826a, d437b74
  • ✨ Improved Icon component cf433af, e59664d
  • ✨ List and Select components now support case-insensitive search bab4b30

  What has changed?

  • ♿️ Improved components accessibility 3bf2f15
  • ♿️ Scrolling is now prevented when a modal or sheet is active 05354a4
  • 💄 Arrow icons are now called chevrons e59664d
  • 🐛 Fixed Svelte Copy component bec3f67
  • 🐛 Interactive components are now compatible with Astro’s ViewTransition API 090fedf

  Not that arrowDown, arrowLeft, and arrowRight icons have been renamed to chevrons. If you use these icons imported from webcoreui/icons or through the Icon component, you’ll need to update your references:

  // Update imports
   import { arrowDown, arrowLeft, arrowRight } from 'webcoreui/icons'
   import { chevronwDown, chevronwLeft, chevronwRight } from 'webcoreui/icons'
  
  // Update types
   <Icon type="arrow-down" />
   <Icon type="chevron-down" />

  The file and components icon types have also been removed. Use the iconSet prop instead to add additional custom icons when using the Icon component.

  See changes

• v0.9.0

  Introducing Astro 5.0 update with four new components: BottomNavigation, Copy, Flex, and Grid, two new blocks called DeviceMockup and GridWithIcons, along with several other improvements!

  What’s new?

  • ✨ Added BottomNavigation component c129bcb
  • ✨ Added Copy component d2b91ef Click to copy
  • ✨ Added Flex component 6db7706, f35250b, aac5d1e
  • ✨ Added Grid component 75acad4
  • ✨ Added DeviceMockup block 89a8d81
  • ✨ Added GridWithIcons block 956e8a1
  • 💄 Added responsive utility classes 8f75064
  • 🏷️ Additional component types now available for import c746064

      <BottomNavigation
          items={[{ name: 'Home', icon: 'home', href: '#' }, { ... }, { ... }]}
          separated={true}
          floating={true}
      />

  import {
      DataTableEventType,
      HeadingObject,
      ListEventType,
      PaginationEventType,
      SelectEventType
  } from 'webcoreui/astro' // Also available from webcoreui/svelte and webcoreui/react

  What has changed?

  • ⬆️ Updated Astro and Svelte to 5.0 ed15e0a, 1f101e1
  • ✨ Select components can now infer their value from their itemGroups prop f0b57f3
  • ✨ Added HTML support for input labels b71f2e3, 78a6b0a
  • ✨ Added two-day data binding for Svelte Input components 78a6b0a
  • ✨ Added ability to pass data attributes to input elements d35c82b
  • 💄 Improved default styles of cards and muted text ac7cb7f
  • 💄 Improved Skeleton responsiveness 59ea089
  • ♿️ Improved accessibility of Select and Popover 4e64b50
  • 🐛 Fixed Svelte badges always rendering as button elements 1754ccb
  • 🐛 Fixed icon size shrinking for Accordion with multiline text 13abb69
  • 🐛 Fixed type error when using get with a single parameter 8e94c6b

  We also updated our dependency to Astro 5.x, meaning you can safely remove the following config from your codebase in case they’re present:

  export default defineConfig({
      vite: {
          ssr: {
              noExternal: ['webcoreui']
          }
         css: {
             preprocessorOptions: {
                 scss: {
                     api: 'modern-compiler'
                 }
             }
         }
      },
     experimental: {
         directRenderScript: true // Enabled by default in Astro 5.x
     }
  })

  See changes

• v0.8.1

  Introducing two new components: Skeleton and Ribbon! We also updated Sass to the latest version which includes some breaking changes. Please read the “What has changed” section below to see the migration guide.

  What’s new?

  • ✨ Added Skeleton component 58cbd4f:
  •  
  • ✨ Added Ribbon component 447118c

  What has changed?

  • 🐛 Fixed React warning with Table component b2d8aca
  • 🐛 Fixed TypeScript warnings for ConditionalWrapper when extra props are used b415d12
  • 🐛 Fixed a bug where icons on Button components prevented click events b415d12
  • ⬆️ Updated Sass to latest version (v1.77 -> v1.80) 516d2ad
  Breaking change: We updated Sass to the latest version, which means we no longer support the legacy @import rule. Please make the following changes in your Webcore project.

  "sass": "1.77.5",
  "sass": "1.80.7",

  @import 'webcoreui/styles';
  @import 'webcoreui/config';
  
  @use 'webcoreui/styles' as *;
  @use 'webcoreui/config' as *;

  export default defineConfig({
      vite: {
          ssr: {
              noExternal: ['webcoreui']
          }
          css: {
              preprocessorOptions: {
                  scss: {
                      api: 'modern-compiler'
                  }
              }
          }
      }
  })

  See changes

• v0.7.0

  Introducing 5 new components, bringing the total number of Astro, Svelte, and React components to over 40! We also made some improvements to our Accordion component, and updated Astro to the latest version (v4.15 -> v4.16), without any breaking changes.

  What’s new?

  • ✨ Added Stepper component 4c98734, 06bd895
  • ✨ Added Kbd component 2e75831: ⌘⇧K
  • ✨ Added Banner component b6cc705
  • ✨ Added AspectRatio component e42ec8c, 5cb1648
  • ✨ Added Spoiler component d698776, 5cb1648: Click to reveal the text behind

  <Stepper items={[ { title: 'Setup' }, { title: 'Configure' } ... ]} />

  1. SetupGet ready
  2. ConfigurePreferences
  3. 3
     FinishFinal steps

  What has changed?

  • ✨ Improve customizability of Accordion component 4ddf4ff
  • ⬆️ Updated Astro to latest version (v4.15 -> v4.16)

  See changes

• v0.6.1

  In this small release, we added multiple items per slide support for the Carousel component, added two new DOM utility function (get and on), and improved types and CSS utility classes:

  • ✨ Added multiple items per slide support for Carousel a12f0bc
  • ✨ Added DOM utility functions for Astro 4739898
  • 🏷️ Updated types and CSS utilities d9f08a5, 4d960fd

  import { get, on } from 'webcoreui'
  
  const element = get('.selector')        // Get a single DOM element
  const element = get('.selectors', true) // Get all DOM elements with the selector
  
  // Adding event listener
  on('button', 'click', () => console.log('Button clicked.'))

  See changes

• v0.6.0

  Introducing 4 new components, along with more customization options for existing components, including an option to turn any element into a modal!

  What’s new?

  • ✨ Added Breadcrumb component 3b23622
  • ✨ Added Masonry component a677653, 3aa028c
  • ✨ Added Sidebar component 495ce1e, 49d8ef4
  • ✨ Added Footer component acf1121
  • ✨ Added transparent modal for opening custom components 45a573b
  • ✨ Added small and rounded badges 4638ed1, 1fdef66 rounded small small rounded
  • 🏷️ Improved types 2cee766, 3b1b54b, f7c2c0f, d7ccb77
  • 🏷️ Export component prop types 24aebdb
  Breadcrumb component example:

  • Home
  • Docs
  • Components

  What has changed?

  • 🧑‍💻 Unify Menu link url naming with Footer component f9e98e7

  If you’re using menus, please rename the url property to href:

  <Menu items={[{ name: 'Home', url: '/' }]} />
  <Menu items={[{ name: 'Home', href: '/' }]} />

  See changes

• v0.5.0

  Introducing 3 new components: Pagination, DataTable, and Carousel, along with several bug fixes!

  What’s new?

  • ✨ Added Pagination component 13cf23c, 60eeddd, a837f8b
  • ✨ Added DataTable component 5ca8180, bd84616, ec044f1, 0e79854
  • ✨ Added Carousel component c40747b, f2cb11d, c3e491f, a3cc89e
  • ✨ Added table for CSS resets ff69141
  • ✨ Allow Select components to keep their original values e40bb35
  • ⚡️ Remove resize observer from Select components on unmount 755be14
  • 💄 Add option to target Avatar groups with CSS classes d990a55

  <Select
      value="Take an action"
      itemGroups={[ ... ]}
      updateValue={false}
  />

  What has changed?

  • 💄 Reduce <code> tags paddings e807579
  • 🐛 Fixed labeled inputs not taking up the full width of their containers cdefdec
  • 🐛 Fixed pagination buttons not disabled when prop set 5712336
  • 🐛 Fixed errors when multiple paginate listen events are present on the same page 5712336
  • 🐛 Fixed List subText alignment for links without icons 0e9b6a3

  See changes

• v0.4.0

  Introducing 3 new components, including a highly customizable Select input! With this release, Webcore now has over 30 fully coded components for Astro, Svelte, and React!

  What’s new?

  • ✨ Added Select component 7c84dcb
  • ✨ Added List component 4f5b3c3
  • ✨ Added Group component 2e7cc32, cc2b9bd
  • ✨ Added ability to select card body through props dc94487
  • ✨ Added ability to disable animations 94b84e5, 3be1540
  • ✨ Added onInput support for Input components 7d7a6e2

  // Set the following in your CSS configuration file if you need to completely disable animations
  $disableAnimations: true

  What has changed?

  • 🏷️ Improved types for existing components
  • ✨ Improved Modal API 5ec3df6. See the updated documentation for more info.
  • 🐛 Fixed resize issues with elements when placed inside .grid 1923fd5
  • 🐛 Prevent Popover to take up visible space when toggled off 79014e1

  For Modals, you can now pass a configuration to your modal utility function to specify the trigger element using the trigger property:

  button.addEventListener('click', () => modal('#my-modal'))
  
  modal({
      trigger: '#my-button',
      modal: '#my-modal'
  })

  In Svelte and React, you can keep on passing the selector of the modal only, instead of using a configuration object:

  <Button onClick={() => modal('#my-modal')}>Open Modal</Button>

  See changes

• v0.3.0

  Introducing 4 new component, including Popover (with 12 different possible positions), Sheet (with all 4 positions), Collapsible and Textarea!

  What’s new?

  • ✨ Added Popover component 8bc0ac3, 63ce582
  • ✨ Added Sheet component 2a5e7eb
  • ✨ Added Collapsible component 484d1e2
  • ✨ Added Textarea component 6e02930
  • ✨ Added debounce utility function 63ce582
  • 🏷️ Added types for utilities 25fca4f

  Collapse changes

  What has changed?

  • 🐛 Fixed distorted avatar images when the aspect ratio is not 1:1 fd98d8c
  • 🐛 Fixed custom icon showing up in the wrong place for Svelte Toast component 45c945c

  See changes

• v0.2.0

  Introducing sliders and modals! With this release, we also made several improvements to our existing components.

  What’s new?

  • ✨ Added Slider component 39f9bf8, 98e95e7
  • ✨ Added Modal component 633d4f7, c9f8f1f
  • ✨ Added utility classes for flexbox 9143a5c
  • ✨ Added interpolate utility functions

  <Slider value={30} />

  What has changed?

  • ✨ Added support for scrollable tables e93f276
  • ✨ Added additional theme example 7de1a37
  • ✨ Made Rating component accept decimal numbers e6b8beb
  • ✨ Accept active state for menu items 58c00e2
  • ♿️ Improved components accessibility e72a8ed
  • 💄 Match default font size with browser defaults 6658c96
  • 💄 Adjust alert alignments 77c088f
  • 🐛 Fixed React types for TimelineItem 64d9d3d
  • 🐛 Fixed tooltip and timeline alignment issues 6a386ef

  The includeHelperClasses CSS configuration option has been renamed to includeUtilities, and we added additional CSS utility classes for flexbox. Please check the layout documentation for more information on how to use these.

  @include setup((
     includeHelperClasses: false
     includeUtilities: false
  ));

  See changes

• v0.1.0

  With this release, we reached a milestone for Webcore! Moving forward, we’ll use minor versioning until we reach a stable v1.0, after which we continue version updates using semantic versioning.

  What’s new?

  • ✨ Added support for CSS customization 84cd405
  • ✨ Added base CSS mixins
  Breaking change: Moving forward, you’ll need to add a webcore.config.scss file at the root of your project directory.

  This will add the ability to better customize the CSS of Webcore. See our CSS configuration docs for more info on how to customize your CSS. You can now also use our custom mixins to stay in line with Webcore’s theme when building your own custom components.

  What has changed?

  • 💄 The includeElementStyles option has been removed from the setup mixin, and instead, element styles are added using the includeResets option.

  @include setup((
     includeElementStyles: false
     includeResets: false
  ));

• v0.0.12

  Introducing themes along with a custom ThemeSwitcher component! As part of this release, we also made smaller bug fixes, improved our component’s accessibility, and introduced CSS modules for proper scoping.

  What’s new?

  • ✨ Added ThemeSwitcher component dbf4eb6
  • ✨ Added Menu component 8a60322
  • ✨ Added themes 499dbd4
  • ✨ Added styles for scrollbar 1b6fc71
  • ✨ Icons are now importable as strings 98a35b8
  • 💄 Added new CSS utility classes

  import { info } from 'webcoreui/icons'

  What has changed?

  • ✨ Improved components usability, simplified logic, and fixed visual bugs 1c05443
    • The Badge, Button, and Checkbox components can now accept custom classes through the classNames prop.
  • 🏷️ Made Svelte component types importable 347800b
  • ♿️ Improved accessibility of components b826d00
  • 🐛 Fixed improper imports causing errors when using the Input component df2a7b8
  • 🐛 Fixed a bug with the Rating component when scores are not set
  • 🐛 Fixed a tooltip bug where content overlaps with other elements on the page
  • 💄 Introduced CSS modules to prevent style collisions 02a9199

  The fill prop has been removed from the Input component. To achieve the same style, set the theme prop to fill instead:

  The boxed prop of the Checkbox component has also been removed. Instead, wrap your checkbox into a Card component if you’d like to achieve the same visuals:

  Checkbox with label

  And boxed using the Card component.

  See changes

• v0.0.11

  Introducing tables and inputs! With this release, Webcore now comes with a total of 20 components for Astro, Svelte, and React that you can use in your projects!

  • ✨ Added Table components dad3a34
  • ✨ Added Input component 1701337

  See changes

• v0.0.10

  Introducing our biggest release yet! This release includes 6 new components and many improvements to type definitions, usability, and bug fixes!

  What’s new?

  • ✨ Added Progress component 1ff8653
  • ✨ Added Timeline component f2a146e
  • ✨ Added Toast component fec229d, 1d3eaaf, 9f116fd
  • ✨ Added Tooltip component cb0ca27. Hover me to see example.
  • ✨ Added Spinner component 31f334e
  • ✨ Added Tabs component dc0d1dd, a269841, f55bf83

  <Progress value={30} />

  What has changed?

  • ✨ Allow Badge component to accept HTML attributes e52c1f9
  • 🏷️ Make React type definitions importable 6505075
  • 🏷️ Fixed type errors for React callback function arguments 689d430
  • 🐛 Fixed React component bugs dcd1645

  We’ll soon move forward with minor version updates once all core components are in place and our Sass configuration reaches a more stable state.

  See changes

• v0.0.9

  Introduction the following 5 new components to Webcore!

  What’s new?

  • ✨ Added Avatar component f34899d, 56cd716
  • ✨ Added Checkbox component 03f4fa7, f4d4f47
  • ✨ Added Radio component 8661cab
  • ✨ Added Rating component d9a8138, cdaf9ed ★★★★★
  • ✨ Added Switch component a56fb4e, 957534a

  See changes

• v0.0.8

  • 💄 Improvements to CSS scoping

• v0.0.7

  • ✨ Added Alert and ConditionalWrapper components 6c16a19
  • ✨ Added Badge component 6fe0780
  • ✨ Added Svelte + React card components 1098d75

  What has changed?

  • ✨ Added types to Icons component and improved its usability 92c7be0
  • 💄 Scoped Accordion CSS 47d5086
  Introducing additional core components to Webcore

  Alert for displaying important message, Badge for labels and status indicators, and ConditionalWrapper for improved code quality. This block was created using an info Alert.

  We also introduced Svelte and React variants for the Card component, added TypeScript types for our Icon component, and removed dynamic imports to prevent flashes on page load + made improvements to scope CSS.

  See changes

• v0.0.6

  • ✨ Added Icon component 74aaf8a

• v0.0.5

  • ✨ Added README.md for short documentation
  • ✨ Added Svelte + React Accordion components 39019a0

  What has changed?

  • 💄 Improved Accordion usability 4b0be79
  • 💄 includeFonts removed in favor of fontRegular and fontBold configuration rules c710311

  @include setup((
     includeFonts: true
      // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
     fontBold: '/fonts/Inter-Bold.woff2'
  ));

  This release includes minor changes to the existing components to improve usability, with improvements to the way CSS works in Webcore that aims to improve developer experience and configurability.

• v0.0.3

  Introducing our first public release of Webcore, including the following core components and changes:

  • ✨ Added Accordion component
  • ✨ Added Button component
  • ✨ Added Card component for Astro
  • 💄 Initial setup for CSS configuration, including the addition of Transition and Media mixins.
  • 💄 Introduced the following SCSS configuration options:
    • includeResets: Configuration rule to include CSS resets.
    • includeFonts: Configuration rule to include font-specific rules.
    • includeHelperClasses: Configuration rule to include utility classes.

  See changes