Feature/1862 calendar development

.changeset/all-dryers-talk.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/shared': minor
+---
+
+New `dateListConverter` added.

.changeset/fast-months-smash.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/calendar': patch
+---
+
+New version of the calendar component. Improved styling and accessibility.

.changeset/nine-shrimps-poke.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/date-field': patch
+---
+
+Make a date-field working with dates (not dates and hours).

.github/agents/testing-specialist.agent.md

@@ -150,6 +150,21 @@ it('should emit a click event when clicked', () => { ... });
 it('should be disabled when disabled prop is set', () => { ... });
 ```
 
+**Important**: Do not use "by default" in test descriptions within the `defaults` describe block, as this is redundant:
+```typescript
+// ✅ Good
+describe('defaults', () => {
+  it('should not be disabled', () => { ... });
+  it('should not show week numbers', () => { ... });
+});
+
+// ❌ Bad
+describe('defaults', () => {
+  it('should not be disabled by default', () => { ... });
+  it('should not show week numbers by default', () => { ... });
+});
+```
+
 ## What to Test
 
 ### Essential Tests

.github/copilot-instructions.md

@@ -36,6 +36,22 @@ All components are built using Lit and TypeScript. All components follow the fol
 - Public properties should come before public properties
 - Public methods should come before private methods
 
+### Code style
+
+When declaring multiple constants, use a single multiline `const` statement instead of multiple separate statements:
+
+```typescript
+// ✅ Good
+const foo = 'bar',
+  baz = 'qux',
+  another = 'value';
+
+// ❌ Bad
+const foo = 'bar';
+const baz = 'qux';
+const another = 'value';
+```
+
 ## Tools
 
 To build the components, use the following command from the root of the repository:

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import '@af-utils/scrollend-polyfill';
 import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
 import '@sl-design-system/announcer/register.js';
 import { configureLocalization } from '@lit/localize';

chromatic/.storybook/stories/all.stories.ts

@@ -13,6 +13,7 @@ import { All as AllIcon } from '../../../packages/components/icon/src/icon.stori
 import { All as AllInlineMessage } from '../../../packages/components/inline-message/src/inline-message.stories';
 import { All as AllMenu } from '../../../packages/components/menu/src/menu.stories';
 import { All as AllMenuButton } from '../../../packages/components/menu/src/menu-button.stories';
+import { All as AllMonthView } from '../../../packages/components/calendar/src/month-view.stories';
 import { All as AllPopover } from '../../../packages/components/popover/src/popover.stories';
 import { All as AllRadioGroup } from '../../../packages/components/radio-group/src/radio-group.stories';
 import { All as AllSearchField } from '../../../packages/components/search-field/src/search-field.stories';
@@ -79,6 +80,7 @@ export const Icon = { render: AllIcon.render };
 export const InlineMessage = { render: AllInlineMessage.render };
 export const Menu = { render: AllMenu.render };
 export const MenuButton = { render: AllMenuButton.render };
+export const MonthView = { render: AllMonthView.render };
 export const Popover = { render: AllPopover.render };
 export const RadioGroup = { render: AllRadioGroup.render };
 export const SearchField = { render: AllSearchField.render };

chromatic/package.json

@@ -40,13 +40,13 @@
     }
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-themes": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-themes": "^10.0.7",
+    "@storybook/web-components-vite": "^10.0.7",
     "lit": "^3.3.1",
-    "storybook": "^9.1.13",
-    "storybook-addon-pseudo-states": "^9.1.13",
+    "storybook": "^10.0.7",
+    "storybook-addon-pseudo-states": "^10.0.7",
     "tslib": "^2.8.1",
     "typescript": "^5.5.4",
     "wireit": "^0.14.12"

package.json

@@ -452,24 +452,27 @@
     }
   },
   "devDependencies": {
+    "@af-utils/scrollend-polyfill": "^0.0.14",
     "@changesets/cli": "^2.29.7",
     "@changesets/get-github-info": "^0.6.0",
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@faker-js/faker": "^10.1.0",
     "@lit/localize-tools": "^0.8.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-vitest": "^9.1.13",
-    "@storybook/web-components": "^9.1.13",
-    "@storybook/web-components-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.7",
+    "@storybook/addon-docs": "^10.0.7",
+    "@storybook/addon-vitest": "^10.0.7",
+    "@storybook/web-components": "^10.0.7",
+    "@storybook/web-components-vite": "^10.0.7",
+    "@types/chai-datetime": "^1.0.0",
     "@types/chai-dom": "^1.11.3",
-    "@types/sinon": "^17.0.4",
+    "@types/sinon": "^21.0.0",
     "@types/sinon-chai": "^4.0.0",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/browser-playwright": "^4.0.9",
+    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/ui": "^4.0.9",
     "@webcomponents/scoped-custom-element-registry": "^0.0.10",
-    "chai": "^6.2.0",
+    "chai": "^6.2.1",
+    "chai-datetime": "^1.8.1",
     "chai-dom": "^1.12.1",
     "chromatic": "^13.3.0",
     "eslint": "^9.27.0",
@@ -480,11 +483,11 @@
     "playwright": "^1.56.1",
     "sinon": "^21.0.0",
     "sinon-chai": "^4.0.1",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.7",
     "stylelint": "^16.19.1",
     "typescript": "^5.5.4",
-    "vite": "^7.1.11",
-    "vitest": "^3.2.4",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.9",
     "wireit": "^0.14.12"
   }
 }

packages/angular/package.json

@@ -86,7 +86,7 @@
     "@angular/platform-browser": "^19.2.14",
     "@angular/platform-browser-dynamic": "^19.2.14",
     "@angular/router": "^19.2.14",
-    "@storybook/angular": "^9.1.13",
+    "@storybook/angular": "^10.0.7",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",
     "karma": "~6.4.4",
@@ -96,7 +96,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-packagr": "^19.2.2",
     "rxjs": "~7.8.2",
-    "storybook": "^9.1.13",
+    "storybook": "^10.0.7",
     "tslib": "^2.8.1",
     "typescript": "~5.5.4",
     "wireit": "^0.14.12",

packages/components/accordion/src/accordion-item.spec.ts

@@ -1,7 +1,7 @@
 import { fixture } from '@sl-design-system/vitest-browser-lit';
-import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { beforeEach, describe, expect, it } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import '../register.js';
 import { AccordionItem } from './accordion-item.js';
 

packages/components/accordion/src/accordion.spec.ts

@@ -1,7 +1,7 @@
 import { fixture } from '@sl-design-system/vitest-browser-lit';
-import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { beforeEach, describe, expect, it } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import '../register.js';
 import { Accordion } from './accordion.js';
 

packages/components/announcer/index.ts

@@ -1,2 +1,2 @@
-export * from './src/announce.js';
-export * from './src/announcer.js';
+export { announce } from './src/announce.js';
+export { type SlAnnounceEvent, Announcer } from './src/announcer.js';

packages/components/breadcrumbs/src/breadcrumbs.spec.ts

@@ -1,7 +1,7 @@
 import { fixture } from '@sl-design-system/vitest-browser-lit';
-import { page } from '@vitest/browser/context';
 import { html } from 'lit';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
 import '../register.js';
 import { Breadcrumbs } from './breadcrumbs.js';
 

packages/components/button/src/button.spec.ts

@@ -1,10 +1,10 @@
 import { type Form } from '@sl-design-system/form';
 import '@sl-design-system/form/register.js';
 import { fixture } from '@sl-design-system/vitest-browser-lit';
-import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { restore, spy, stub } from 'sinon';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { userEvent } from 'vitest/browser';
 import '../register.js';
 import { type Button, type ButtonType } from './button.js';
 

packages/components/calendar/package.json

@@ -40,7 +40,8 @@
   "dependencies": {
     "@sl-design-system/button": "^1.2.5",
     "@sl-design-system/format-date": "^0.1.3",
-    "@sl-design-system/icon": "^1.3.0"
+    "@sl-design-system/icon": "^1.3.0",
+    "@sl-design-system/tooltip": "^1.3.0"
   },
   "devDependencies": {
     "@lit/localize": "^0.12.2",