diff --git a/.changeset/optional-collection-peers.md b/.changeset/optional-collection-peers.md new file mode 100644 index 00000000000..d24d445baaf --- /dev/null +++ b/.changeset/optional-collection-peers.md @@ -0,0 +1,5 @@ +--- +'@siemens/ix': major +--- + +V6 makes four of the Stencil collection's peer dependencies optional: `@floating-ui/dom`, `animejs`, `luxon`, and `@stencil/core`; `@siemens/ix-icons` remains a required peer. Collection consumers must install all five packages explicitly: `@floating-ui/dom`, `@siemens/ix-icons`, `@stencil/core`, `animejs`, and `luxon`; standard bundled entry points remain self-contained. diff --git a/BREAKING_CHANGES/v6.md b/BREAKING_CHANGES/v6.md index a296390f21e..1b573cf604b 100644 --- a/BREAKING_CHANGES/v6.md +++ b/BREAKING_CHANGES/v6.md @@ -2,6 +2,23 @@ This document lists breaking changes introduced in Siemens Industrial Experience V6. +## Stencil collection optional peers + +The Stencil collection has four newly optional peer dependencies: +`@floating-ui/dom`, `animejs`, `luxon`, and `@stencil/core`. +`@siemens/ix-icons` remains a required peer. Collection metadata and output +consumers must install all five packages: + +```sh +pnpm add @floating-ui/dom @siemens/ix-icons @stencil/core animejs luxon +``` + +Use the equivalent command for npm, pnpm, or another package manager. +`@siemens/ix-icons` remains required for all `@siemens/ix` consumers. Root, +custom-elements, loader, hydrate, and framework consumers do not need to install +the other four optional peers solely for IX because those outputs bundle the +runtime libraries. + ## Siemens design tokens IX components now use SI Theme 6 system and reference tokens instead of legacy diff --git a/packages/core/package.json b/packages/core/package.json index aa8a69f517f..e169d0f0963 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -132,16 +132,15 @@ }, "siemensix": { "dependencies": [ - "@stencil/core" + "@floating-ui/dom", + "@stencil/core", + "animejs", + "luxon" ] }, - "dependencies": { - "@floating-ui/dom": "^1.6.13", - "animejs": "^4.1.2", - "luxon": "^3.4.4" - }, "devDependencies": { "@axe-core/playwright": "catalog:", + "@floating-ui/dom": "^1.6.13", "@playwright/test": "catalog:", "@siemens/ix-icons": "catalog:", "@stencil-community/eslint-plugin": "^0.10.0", @@ -162,6 +161,7 @@ "@typescript-eslint/eslint-plugin": "^8.56.1", "@typescript-eslint/parser": "^8.56.1", "animate.css": "~4.1.1", + "animejs": "^4.1.2", "autoprefixer": "10.4.20", "cssnano": "^6.1.2", "cz-conventional-changelog": "^3.3.0", @@ -172,6 +172,7 @@ "http-server": "^14.1.1", "jest": "^29.7.0", "jest-cli": "^29.7.0", + "luxon": "^3.4.4", "mustache": "^4.2.0", "postcss": "^8.4.40", "puppeteer": "21.1.1", @@ -183,7 +184,25 @@ "vitest": "^4.1.4" }, "peerDependencies": { - "@siemens/ix-icons": "^3.5.0" + "@floating-ui/dom": "^1.6.13", + "@siemens/ix-icons": "^3.5.0", + "@stencil/core": "^4.43.5", + "animejs": "^4.1.2", + "luxon": "^3.4.4" + }, + "peerDependenciesMeta": { + "@floating-ui/dom": { + "optional": true + }, + "@stencil/core": { + "optional": true + }, + "animejs": { + "optional": true + }, + "luxon": { + "optional": true + } }, "config": { "commitizen": { diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 434befe1f31..b23434a0ce5 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -29,7 +29,7 @@ import { DateDropdownOption, DateRangeChangeEvent } from "./components/date-drop import { DateInputValidityState } from "./components/date-input/date-input.types"; import { DateTimeCardCorners } from "./components/date-time-card/date-time-card.types"; import { DateChangeEvent } from "./components/date-picker/date-picker.events"; -import { DateTime } from "luxon"; +import { DatePickerYearMonth } from "./components/date-picker/date-picker.types"; import { DateTimeInputValidityState } from "./components/datetime-input/datetime-input.types"; import { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker.types"; import { ElementReference } from "./components/utils/element-reference"; @@ -86,7 +86,7 @@ export { DateDropdownOption, DateRangeChangeEvent } from "./components/date-drop export { DateInputValidityState } from "./components/date-input/date-input.types"; export { DateTimeCardCorners } from "./components/date-time-card/date-time-card.types"; export { DateChangeEvent } from "./components/date-picker/date-picker.events"; -export { DateTime } from "luxon"; +export { DatePickerYearMonth } from "./components/date-picker/date-picker.types"; export { DateTimeInputValidityState } from "./components/datetime-input/datetime-input.types"; export { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker.types"; export { ElementReference } from "./components/utils/element-reference"; @@ -1443,7 +1443,7 @@ export namespace Components { * @default DateTime.now().toISO() */ "today": string; - "updateSelectedYearMonth": (date: DateTime) => Promise; + "updateSelectedYearMonth": (date: DatePickerYearMonth) => Promise; /** * The index of which day to start the week on, based on the Locale#weekdays array. E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on Monday. * @default 0 diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx index 887a7f0ba39..26ae23de6e2 100644 --- a/packages/core/src/components/date-picker/date-picker.tsx +++ b/packages/core/src/components/date-picker/date-picker.tsx @@ -32,6 +32,7 @@ import { makeRef } from '../utils/make-ref'; import { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame'; import { IxDatePickerComponent } from './date-picker-component'; import type { DateChangeEvent } from './date-picker.events'; +import type { DatePickerYearMonth } from './date-picker.types'; import { hasKeyboardMode } from '../utils/internal/mixins/setup.mixin'; interface CalendarWeek { @@ -383,7 +384,7 @@ export class DatePicker * @internal */ @Method() - async updateSelectedYearMonth(date: DateTime) { + async updateSelectedYearMonth(date: DatePickerYearMonth) { this.selectedYear = date.year; this.selectedMonth = date.month - 1; } diff --git a/packages/core/src/components/date-picker/date-picker.types.ts b/packages/core/src/components/date-picker/date-picker.types.ts new file mode 100644 index 00000000000..2d2b21d439c --- /dev/null +++ b/packages/core/src/components/date-picker/date-picker.types.ts @@ -0,0 +1,13 @@ +/* + * SPDX-FileCopyrightText: 2026 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +export interface DatePickerYearMonth { + year: number; + month: number; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a948959abe..aca6a24fc21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -450,20 +450,13 @@ importers: version: 5.8.3 packages/core: - dependencies: - '@floating-ui/dom': - specifier: ^1.6.13 - version: 1.6.13 - animejs: - specifier: ^4.1.2 - version: 4.1.2 - luxon: - specifier: ^3.4.4 - version: 3.4.4 devDependencies: '@axe-core/playwright': specifier: 'catalog:' version: 4.11.0(playwright-core@1.58.1) + '@floating-ui/dom': + specifier: ^1.6.13 + version: 1.6.13 '@playwright/test': specifier: 'catalog:' version: 1.58.1 @@ -524,6 +517,9 @@ importers: animate.css: specifier: ~4.1.1 version: 4.1.1 + animejs: + specifier: ^4.1.2 + version: 4.1.2 autoprefixer: specifier: 10.4.20 version: 10.4.20(postcss@8.5.6) @@ -554,6 +550,9 @@ importers: jest-cli: specifier: ^29.7.0 version: 29.7.0(@types/node@20.16.5)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.16.5)(typescript@5.4.5)) + luxon: + specifier: ^3.4.4 + version: 3.4.4 mustache: specifier: ^4.2.0 version: 4.2.0