sl-design-system · anna-lach · May 7, 2026 · May 21, 2026 · Jun 3, 2026 · Jun 17, 2026
@@ -14,7 +14,9 @@ export default {
     In the theme is a global.css file containing styling for links. This works as a global style for
     links in your application and links in the light dom of SLDS components.
     <br />
-    <a href="https://sanomalearning.design" target="_blank" rel="noopener noreferrer">Sanoma Learning Design system</a>
+    <a href="https://sanomalearning.design" target="_blank" rel="noopener noreferrer"
+      >Sanoma Learning Design system</a
+    >
   `
 } satisfies Meta<Props>;
 

@@ -9,12 +9,10 @@
 ### Patch Changes
 
 - [#3299](https://github.com/sl-design-system/components/pull/3299) [`78e7333`](https://github.com/sl-design-system/components/commit/78e733338fd67ef59797b3e02b22907fe0f5c638) - Minor style fixes:
-
   - fix icon-only size regression by using `box-sizing: content-box`
   - fix `<button>` growing larger than the host `<sl-button>`
 
 - [#3360](https://github.com/sl-design-system/components/pull/3360) [`7163d4e`](https://github.com/sl-design-system/components/commit/7163d4ee4cb47e4db591aceba2e3978f8f31b2c7) - Styling fixes:
-
   - Fix WebKit bug where the aspect-ratio of the inner button is ignored
   - Fix bug where the inner button doesn't grow with the host element
 
@@ -34,7 +32,6 @@
 ### Major Changes
 
 - [#3139](https://github.com/sl-design-system/components/pull/3139) [`50590de`](https://github.com/sl-design-system/components/commit/50590de476ff108cc28b865dbc96e3ca48399538) - Breaking changes:
-
   - The component now renders a native `<button>` inside the shadow DOM, changing the DOM structure
   - The `icon-only` attribute and `iconOnly` property have been removed in favor of the `:state(icon-only)` CSS custom state
 
@@ -89,7 +86,6 @@
 ### Minor Changes
 
 - [#2646](https://github.com/sl-design-system/components/pull/2646) [`f025c0f`](https://github.com/sl-design-system/components/commit/f025c0f3cbb83b72c80563e9d989402608add193) - Various improvements:
-
   - Fix missing inverted + disabled styling
   - Add support for `aria-disabled="true"`
 
@@ -146,7 +142,6 @@
 ### Minor Changes
 
 - [#1675](https://github.com/sl-design-system/components/pull/1675) [`389d0e2`](https://github.com/sl-design-system/components/commit/389d0e2a982dd40b4e3a04cf3b1d8b34204236a0) - Button improvements:
-
   - Added a new `shape` property that defaults to `square` but also accepts `pill` for rounded corners
   - Added a new `inverted` variant, to be used on dark/light background (depending on light/dark mode)
   - Removed default values of `fill`, `size`, `type` and `variant` properties

@@ -81,20 +81,24 @@ export class Calendar extends LocaleMixin(ScopedElementsMixin(LitElement)) {
 
   /**
    * The list of dates that should display an indicator. Each item has a `date` and optional `color`
-   * and `label` values that are used to improve accessibility.
+   * and `label` values that are used to improve accessibility. Use `indicator-dates` to highlight
+   * specific dates with a visual indicator (for example, exam dates or assignment deadlines)
+   * without disabling them.
    */
   @property({ attribute: 'indicator-dates', converter: indicatorConverter })
   indicatorDates?: Indicator[];
 
   /**
-   * The maximum date selectable in the calendar.
+   * The maximum date selectable in the calendar. Dates outside the range are visually disabled and
+   * cannot be selected.
    *
    * @default undefined
    */
   @property({ converter: dateConverter }) max?: Date;
 
   /**
-   * The minimum date selectable in the calendar.
+   * The minimum date selectable in the calendar. Dates outside the range are visually disabled and
+   * cannot be selected.
    *
    * @default undefined
    */

@@ -46,8 +46,15 @@ const DAYS_IN_WEEK = 7;
  *
  * @csspart day - The day button.
  * @csspart disabled - The day button when shown as disabled.
+ * @csspart header - The thead element with weekday names.
  * @csspart indicator - The day button for a date with an indicator.
+ * @csspart indicator-blue - The day button for a date with a blue indicator.
+ * @csspart indicator-red - The day button for a date with a red indicator.
+ * @csspart indicator-yellow - The day button for a date with a yellow indicator.
+ * @csspart indicator-green - The day button for a date with a green indicator.
+ * @csspart indicator-grey - The day button for a date with a grey indicator.
  * @csspart next-month - The day button for a day in the next month.
+ * @csspart out-of-range - The day button for a date outside the min/max range.
  * @csspart previous-month - The day button for a day in the previous month.
  * @csspart selected - The day button for the selected date.
  * @csspart today - The day button for today's date.
@@ -148,7 +155,9 @@ export class MonthView extends LocaleMixin(ScopedElementsMixin(LitElement)) {
 
   /**
    * The list of dates that should display an indicator. Each item is an Indicator with a `date`, an
-   * optional `color` and 'label' that is used to improve accessibility (added as a tooltip).
+   * optional `color` and `label` that is used to improve accessibility (added as a tooltip). Use
+   * `indicator-dates` to highlight specific dates with a visual indicator (for example, exam dates
+   * or assignment deadlines) without disabling them.
    */
   @property({ attribute: 'indicator-dates', converter: indicatorConverter })
   indicatorDates?: Indicator[];
@@ -157,14 +166,16 @@ export class MonthView extends LocaleMixin(ScopedElementsMixin(LitElement)) {
   @state() localizedWeekOfYear?: string;
 
   /**
-   * The maximum date selectable in the month.
+   * The maximum date selectable in the month. Dates outside the range are visually disabled and
+   * cannot be selected.
    *
    * @default undefined
    */
   @property({ converter: dateConverter }) max?: Date;
 
   /**
-   * The minimum date selectable in the month.
+   * The minimum date selectable in the month. Dates outside the range are visually disabled and
+   * cannot be selected.
    *
    * @default undefined
    */
@@ -306,6 +317,7 @@ export class MonthView extends LocaleMixin(ScopedElementsMixin(LitElement)) {
     `;
   }
 
+  /** Renders the header row with week day names. Override this to customize the header. */
   renderHeader(): TemplateResult {
     return html`
       <thead part="header">
@@ -325,6 +337,7 @@ export class MonthView extends LocaleMixin(ScopedElementsMixin(LitElement)) {
     `;
   }
 
+  /** Renders a single day cell. You can also use the `renderer` property to customize how days look. */
   renderDay(day: Day): TemplateResult {
     let template: TemplateResult | undefined;
 
@@ -395,8 +408,11 @@ export class MonthView extends LocaleMixin(ScopedElementsMixin(LitElement)) {
     ].filter(part => part !== '');
   };
 
+  /** @internal */
   override focus(options?: FocusOptions): void;
+  /** @internal */
   override focus(date: Date): void;
+  /** @internal */
   override focus(dateOrOptions?: Date | FocusOptions): void {
     if (dateOrOptions instanceof Date) {
       const button = this.renderRoot.querySelector<HTMLButtonElement>(

@@ -20,11 +20,9 @@
 ### Patch Changes
 
 - [#3211](https://github.com/sl-design-system/components/pull/3211) [`20a1178`](https://github.com/sl-design-system/components/commit/20a1178f0f1548bd083df7d337ecba443daf579f) - Functional changes:
-
   - The popover opens when you click in the combobox, no longer when you enter the combobox with keyboard navigation.
 
   Accessibility improvements:
-
   - Forward ARIA attributes (`aria-label`, `aria-describedby`, `aria-labelledby`) from host element to the input element for proper screen reader support
   - Automatically associate label with input via `aria-labelledby` when a label is present
 
@@ -175,7 +173,6 @@
   ```
 
   You can customize the rendering of each option by using:
-
   - `optionLabelPath` to specify the path to the label in each option object
   - `optionValuePath` to specify the path to the value in each option object
 
@@ -185,7 +182,6 @@
   the options in both scenarios by using the `sl-option { ... }` selector.
 
 - [#1642](https://github.com/sl-design-system/components/pull/1642) [`cef2371`](https://github.com/sl-design-system/components/commit/cef2371d5868439edbba8156bf38c167b72f0f39) - Various combobox fixes:
-
   - Add `aria-owns` for linking the input to the listbox
   - Add `aria-posinset` and `aria-setsize` to the listbox options for virtual lists
   - Add focus style to tags
@@ -208,7 +204,6 @@
 ### Patch Changes
 
 - [#1599](https://github.com/sl-design-system/components/pull/1599) [`4714b36`](https://github.com/sl-design-system/components/commit/4714b36f1387d4d1731a310b621caf5a33be105b) - Various a11y related fixes/improvements:
-
   - The label was associated with the `<sl-combobox>` element instead of the `<input>` element
   - `aria-selected="false"` was missing on the non-selected options
   - `aria-multiselectable="true"` was missing on the listbox when the multiple property is set

@@ -16,7 +16,6 @@
 ### Minor Changes
 
 - [#3248](https://github.com/sl-design-system/components/pull/3248) [`fc60898`](https://github.com/sl-design-system/components/commit/fc60898ea3c7b5b234a13c6bf157e89528f3a11f) - Standardized warning and error icons:
-
   - Changed `warning` icons from `octagon-exclamation-solid` to `triangle-exclamation-solid` in Callout, Inline message, and Progress bar.
   - Changed `circle-exclamation-solid` to `triangle-exclamation-solid` in validation messages in the Form field.
   - Changed `error/danger` icons from `diamond-exclamation-solid` or `octagon-exclamation-solid` to the new `octagon-xmark-solid` icon in Callout, Inline message, and Progress bar. Make sure to update your theme if you update any of these components.

@@ -201,7 +201,6 @@
 ### Minor Changes
 
 - [#2034](https://github.com/sl-design-system/components/pull/2034) [`1072075`](https://github.com/sl-design-system/components/commit/1072075e3f1b5f0bf8b07dc1f89fd39b9f7103d0) - Big improvements:
-
   - New visual styles throughout all components
   - Refactored to use the new `ListDataSource` class and view model types
   - Removed `SelectionController` since that logic is now part of `ListDataSource`
@@ -224,7 +223,6 @@
   This change removes the `activatable-row` property and instead leaves it to the user to set the `activeRow` property on the `sl-grid` component. The examples in Storybook now also use a button with an avatar to activate the row, which is more accessible than using a checkbox. This fixes the issue we had before where we could not find a solution how to make the row activatable with the keyboard, while also keeping the checkbox for selection. Now, the row can be activated with the keyboard by focusing the button and pressing Enter or Space. And at the same time, the checkbox can still be used for selection.
 
 - [#2024](https://github.com/sl-design-system/components/pull/2024) [`a343e29`](https://github.com/sl-design-system/components/commit/a343e298d6b65966e04b3fbfc3598305a29bf1cc) - Grid improvements:
-
   - Add "Cancel selection" button to the bulk action toolbar
   - Add `column` argument to `GridColumnHeaderRenderer` type
   - Fix missing aria-label on a selection column checkbox
@@ -248,7 +246,6 @@
 ### Patch Changes
 
 - [#2077](https://github.com/sl-design-system/components/pull/2077) [`778e8a1`](https://github.com/sl-design-system/components/commit/778e8a1ae5dc7908e5c000a620b8143883c75a91) - - Adds option to have no skip table links
-
   - Fixes issue for Safari (an other browsers that don't support native anchor positioning) where to "Skip to start of table" link was positioned incorrectly
 
 - [#2072](https://github.com/sl-design-system/components/pull/2072) [`77b348d`](https://github.com/sl-design-system/components/commit/77b348d19a4869f9242d8ea1c70d32d1e6d04212) - Fix regression with basic drag and drop of rows within grid
@@ -349,7 +346,6 @@
 - [#1791](https://github.com/sl-design-system/components/pull/1791) [`133b883`](https://github.com/sl-design-system/components/commit/133b883234d911dabe37bd3c8acef26afea20fe9) - Replace `--sl-size-borderWidth-subtle` with `--sl-size-borderWidth-default`
 
 - [#1653](https://github.com/sl-design-system/components/pull/1653) [`f15d75c`](https://github.com/sl-design-system/components/commit/f15d75c6c3765b797f0bed57c5d1f2855cab4f7e) - Improve horizontal scrolling experience:
-
   - Add shadows to the left and right of the grid when it is scrollable
   - Add the new `<sl-scrollbar>` when the grid is horizontally scrollable
   - Make sure the scrollbar is always visible (sticky at the bottom of the grid)
@@ -375,7 +371,6 @@
 - [#1609](https://github.com/sl-design-system/components/pull/1609) [`515e2fb`](https://github.com/sl-design-system/components/commit/515e2fbbda7ecee92392b8ddf9f98c335fe32cf6) - Added tokens for grid
 
 - [#1616](https://github.com/sl-design-system/components/pull/1616) [`b1e3b74`](https://github.com/sl-design-system/components/commit/b1e3b741e78400e3755ddaa0c5c4fdeed2e3f960) - Improved accessibilty of the table;
-
   - Added aria-rowindex and aria-rowcount;
   - Improved keyboardnavigation, including skip table links
   - Changed the way selecting works; active row by clicking on the entire row and selecting a row by checking the checkbox
@@ -392,7 +387,6 @@
 
 - [#1693](https://github.com/sl-design-system/components/pull/1693) [`4e57f9c`](https://github.com/sl-design-system/components/commit/4e57f9c60835a07db45f74fde73a3bf13b6abe51) - Refactor existing data sources into list specific datasources, clearing
   the way to add `TreeDataSource` in the `@sl-design-system/tree` package.
-
   - The base `DataSource` class has support for sorting and filtering
   - Grouping and pagination has been moved to the `ListDataSource` class
   - `ArrayDataSource` and `FetchDataSource` have been renamed to `ArrayListDataSource` and `FetchListDataSource` respectively

@@ -62,7 +62,6 @@
 ### Patch Changes
 
 - [#1632](https://github.com/sl-design-system/components/pull/1632) [`e68df34`](https://github.com/sl-design-system/components/commit/e68df344917a8d0bdc6a4c92f59079a247c6e7a9) - Add ability to render grouped items using lit-virtualizer:
-
   - New `optionGroupPath` property to specify the path to the group name in the option object
   - New `<sl-option-group-header>` component to render the group header
   - Add `items` property for advanced customization of how options are rendered (used in combobox)

@@ -45,7 +45,6 @@
 - [#3001](https://github.com/sl-design-system/components/pull/3001) [`a7ac909`](https://github.com/sl-design-system/components/commit/a7ac90987881881bd0cb916c583e68c785b52622) - Improves accessibility of menu-groups with headers
 
 - [#3022](https://github.com/sl-design-system/components/pull/3022) [`a4a0c23`](https://github.com/sl-design-system/components/commit/a4a0c23a5341a2026c23e6e7fdf05cfdd44dc16c) - - `MenuButton` and `Button` now correctly block click/keyboard activation when `aria-disabled` is set, but remain focusable for improved accessibility and tooltip support.
-
   - Standalone `MenuButton` continues to use native `disabled` to remain non-focusable, while support for `aria-disabled` focusability has been improved.
 
 - [#3034](https://github.com/sl-design-system/components/pull/3034) [`fd4a0d7`](https://github.com/sl-design-system/components/commit/fd4a0d79b4c0d9a1438b437bc7a1122f03d08c11) - Changed styling so the hover and active state have an indicator. This makes it more accessible because we don't rely on only a subtle change in the background color.
@@ -154,7 +153,6 @@
 ### Patch Changes
 
 - [#1777](https://github.com/sl-design-system/components/pull/1777) [`67f5b81`](https://github.com/sl-design-system/components/commit/67f5b810558d124289f26e3cc3fb2c59da97bb5f) - Fixed several accessibility issues;
-
   - Improved VoiceOver in support Chrome
   - Fixed keyboard navigation in submenu
   - Applied new tokens to menu and menu item

@@ -145,14 +145,12 @@
 ### Patch Changes
 
 - [#1804](https://github.com/sl-design-system/components/pull/1804) [`7a0b48e`](https://github.com/sl-design-system/components/commit/7a0b48e981ad4c7cc1a34022625e6ae3ee55c977) - - Applied new tokens to the paginator,
-
   - Paginator component changes:
     - `size` property no longer controls the width of the layout of the entire paginator, but only the size of the components within the paginator,
     - new `width` property that controls the width of the layout of the entire paginator,
     - new `emphasis` property.
 
 - [#1690](https://github.com/sl-design-system/components/pull/1690) [`1a9604e`](https://github.com/sl-design-system/components/commit/1a9604e1fc70a6382a3545dafee527d7d674179d) - Various improvements:
-
   - Add missing dependencies (announcer & form)
   - Rename `<sl-paginator-size>` to `<sl-paginator-page-size>`
   - Remove `pageSizes` property from `<sl-paginator>`
@@ -169,7 +167,6 @@
 
 - [#1693](https://github.com/sl-design-system/components/pull/1693) [`4e57f9c`](https://github.com/sl-design-system/components/commit/4e57f9c60835a07db45f74fde73a3bf13b6abe51) - Refactor existing data sources into list specific datasources, clearing
   the way to add `TreeDataSource` in the `@sl-design-system/tree` package.
-
   - The base `DataSource` class has support for sorting and filtering
   - Grouping and pagination has been moved to the `ListDataSource` class
   - `ArrayDataSource` and `FetchDataSource` have been renamed to `ArrayListDataSource` and `FetchListDataSource` respectively