@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/collection/components/modal/test/modal.component.play.js

@@ -0,0 +1,196 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsModal, expect, test } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test('should render ds-modal with sub-components', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Test Title</ds-modal-header>
+        <ds-modal-body><p>Body content</p></ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeVisible();
+    });
+    test('should open modal on present()', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeClosed();
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.present();
+        });
+        await dsModal.assertToBeOpen();
+    });
+    test('should close modal on dismiss()', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.dismiss();
+        });
+        await dsModal.assertToBeClosed();
+    });
+    test('should emit dsWillPresent and dsDidPresent on open', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        const willPresent = await dsModal.el.spyOnEvent('dsWillPresent');
+        const didPresent = await dsModal.el.spyOnEvent('dsDidPresent');
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.present();
+        });
+        expect(willPresent).toHaveReceivedEventTimes(1);
+        expect(didPresent).toHaveReceivedEventTimes(1);
+    });
+    test('should emit dsWillDismiss and dsDidDismiss on close', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        const willDismiss = await dsModal.el.spyOnEvent('dsWillDismiss');
+        const didDismiss = await dsModal.el.spyOnEvent('dsDidDismiss');
+        await page.evaluate(() => {
+            const modal = document.querySelector('ds-modal');
+            return modal.dismiss();
+        });
+        expect(willDismiss).toHaveReceivedEventTimes(1);
+        expect(didDismiss).toHaveReceivedEventTimes(1);
+    });
+    test('should close on close button click when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await dsModal.clickClose();
+        await dsModal.assertToBeClosed();
+    });
+    test('should not render close button when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open closable="false">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await expect(dsModal.close.el).not.toBeAttached();
+    });
+    test('should close on backdrop click when closable=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        // Click the top-left corner of the viewport, which lands on the <dialog> backdrop
+        // area (outside the centred modal box). ev.target === dialogEl triggers close.
+        await page.mouse.click(5, 5);
+        await dsModal.assertToBeClosed();
+    });
+    test('should not close on Escape when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open closable="false">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.keyboard.press('Escape');
+        await dsModal.assertToBeOpen();
+    });
+    test('should support direct named slots without sub-components', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open>
+        <span slot="header">Direct Title</span>
+        <div slot="body"><p>Direct body</p></div>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await dsModal.assertTitleText('Direct Title');
+    });
+    test('should assign ds-modal-header to header slot', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>My Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const slotValue = await page.evaluate(() => {
+            var _a;
+            return (_a = document.querySelector('ds-modal-header')) === null || _a === void 0 ? void 0 : _a.slot;
+        });
+        expect(slotValue).toBe('header');
+    });
+    test('should assign ds-modal-body to body slot', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Title</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const slotValue = await page.evaluate(() => {
+            var _a;
+            return (_a = document.querySelector('ds-modal-body')) === null || _a === void 0 ? void 0 : _a.slot;
+        });
+        expect(slotValue).toBe('body');
+    });
+    test('should apply is-fullscreen class when fullscreen=true', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" fullscreen>
+        <ds-modal-header>Fullscreen</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        await page.evaluate(() => document.querySelector('ds-modal').present());
+        await expect(page.locator('ds-modal')).toHaveClass(/is-fullscreen/);
+    });
+    test('should not apply is-fullscreen class when fullscreen=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal">
+        <ds-modal-header>Normal</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        await expect(page.locator('ds-modal')).not.toHaveClass(/is-fullscreen/);
+    });
+    test('fullscreen modal should not close on Escape when closable=false', async ({ page }) => {
+        await page.mount(`
+      <ds-modal id="modal" open fullscreen closable="false">
+        <ds-modal-header>Fullscreen</ds-modal-header>
+        <ds-modal-body>Body</ds-modal-body>
+      </ds-modal>
+    `);
+        const dsModal = new DsModal(page.locator('ds-modal'));
+        await dsModal.assertToBeOpen();
+        await page.keyboard.press('Escape');
+        await dsModal.assertToBeOpen();
+    });
+});

package/dist/collection/components/modal/test/modal.visual.play.js

@@ -0,0 +1,36 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsModal, expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'modal';
+const VARIANTS = [
+    { testId: 'basic', modalId: 'modal-basic' },
+    { testId: 'not-closable', modalId: 'modal-not-closable' },
+    { testId: 'direct-slots', modalId: 'modal-direct' },
+    { testId: 'narrow', modalId: 'modal-narrow' },
+    { testId: 'wide', modalId: 'modal-wide' },
+    { testId: 'rich-content', modalId: 'modal-rich' },
+    { testId: 'scrollable', modalId: 'modal-scrollable' },
+    { testId: 'fullscreen', modalId: 'modal-fullscreen' },
+    { testId: 'fullscreen-not-closable', modalId: 'modal-fullscreen-nc' },
+];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(({ testId, modalId }) => {
+        test(testId, async ({ page }) => {
+            const section = page.getByTestId(testId);
+            await section.getByRole('button').first().click();
+            const modal = new DsModal(page.locator(`ds-modal#${modalId}`));
+            await modal.assertToBeOpen();
+            await expectScreenshot(page.locator('body'), image(testId));
+            await page.evaluate((id) => {
+                const el = document.getElementById(id);
+                return el === null || el === void 0 ? void 0 : el.dismiss();
+            }, modalId);
+            await modal.assertToBeClosed();
+        });
+    });
+});

package/dist/collection/components/navbar/navbar.host.css

@@ -0,0 +1 @@
+:host{--_link-focus: var(--link-focus, var(--mod-link-focus, var(--ds-alias-interaction-focus-color-base)));--_navbar-background: var(--navbar-background, var(--mod-navbar-background, var(--ds-navbar-base-layout-background)));--_navbar-padding: var(--navbar-padding, var(--mod-navbar-padding, var(--ds-navbar-base-layout-padding)));--_navbar-height: var(--navbar-height, var(--mod-navbar-height, var(--ds-navbar-base-layout-height)));--_navbar-shadow: var(--navbar-shadow, var(--mod-navbar-shadow, var(--ds-navbar-base-layout-shadow)));--_navbar-z-index: var(--navbar-z-index, var(--mod-navbar-z-index, var(--ds-navbar-base-layout-z-index)));--_navbar-brand-gap: var(--navbar-brand-gap, var(--mod-navbar-brand-gap, var(--ds-navbar-base-brand-gap)));--_navbar-brand-focus-radius: var(--navbar-brand-focus-radius, var(--mod-navbar-brand-focus-radius, var(--ds-navbar-base-brand-focus-radius)));--_navbar-title-color: var(--navbar-title-color, var(--mod-navbar-title-color, var(--ds-navbar-base-title-color)));--_navbar-title-font-family: var(--navbar-title-font-family, var(--mod-navbar-title-font-family, var(--ds-navbar-base-title-font-family)));--_navbar-title-font-size: var(--navbar-title-font-size, var(--mod-navbar-title-font-size, var(--ds-navbar-base-title-font-size)));--_navbar-title-font-weight: var(--navbar-title-font-weight, var(--mod-navbar-title-font-weight, var(--ds-navbar-base-title-font-weight)));--_navbar-hamburger-width: var(--navbar-hamburger-width, var(--mod-navbar-hamburger-width, var(--ds-navbar-base-hamburger-width)));--_navbar-hamburger-height: var(--navbar-hamburger-height, var(--mod-navbar-hamburger-height, var(--ds-navbar-base-hamburger-height)));--_navbar-hamburger-padding: var(--navbar-hamburger-padding, var(--mod-navbar-hamburger-padding, var(--ds-navbar-base-hamburger-padding)));--_navbar-hamburger-radius: var(--navbar-hamburger-radius, var(--mod-navbar-hamburger-radius, var(--ds-navbar-base-hamburger-radius)));--_navbar-hamburger-transition-duration: var(--navbar-hamburger-transition-duration, var(--mod-navbar-hamburger-transition-duration, var(--ds-navbar-base-hamburger-transition-duration)));--_navbar-sidebar-max-width: var(--navbar-sidebar-max-width, var(--mod-navbar-sidebar-max-width, var(--ds-navbar-base-sidebar-max-width)));--_navbar-sidebar-slide-duration: var(--navbar-sidebar-slide-duration, var(--mod-navbar-sidebar-slide-duration, var(--ds-navbar-base-sidebar-slide-duration)));--_navbar-sidebar-backdrop-color: var(--navbar-sidebar-backdrop-color, var(--mod-navbar-sidebar-backdrop-color, var(--ds-navbar-base-sidebar-backdrop-color)));--_navbar-sidebar-backdrop-opacity: var(--navbar-sidebar-backdrop-opacity, var(--mod-navbar-sidebar-backdrop-opacity, var(--ds-global-elevation-opacity-50)));--_navbar-sidebar-panel-background: var(--navbar-sidebar-panel-background, var(--mod-navbar-sidebar-panel-background, var(--ds-navbar-base-sidebar-panel-background)));--_navbar-sidebar-panel-shadow: var(--navbar-sidebar-panel-shadow, var(--mod-navbar-sidebar-panel-shadow, var(--ds-navbar-base-sidebar-panel-shadow)));--_navbar-sidebar-panel-border-top: var(--navbar-sidebar-panel-border-top, var(--mod-navbar-sidebar-panel-border-top, var(--ds-navbar-base-sidebar-panel-border-top)));--_navbar-sidebar-content-gap: var(--navbar-sidebar-content-gap, var(--mod-navbar-sidebar-content-gap, var(--ds-navbar-base-sidebar-content-gap)));--_navbar-sidebar-padding-inline: var(--navbar-sidebar-padding-inline, var(--mod-navbar-sidebar-padding-inline, var(--ds-navbar-base-sidebar-content-padding-inline)));--_navbar-sidebar-padding-block: var(--navbar-sidebar-padding-block, var(--mod-navbar-sidebar-padding-block, var(--ds-navbar-base-sidebar-content-padding-block)));--_navbar-sidebar-item-min-height: var(--navbar-sidebar-item-min-height, var(--mod-navbar-sidebar-item-min-height, var(--ds-navbar-base-sidebar-item-min-height)));--_navbar-sidebar-item-padding-block: var(--navbar-sidebar-item-padding-block, var(--mod-navbar-sidebar-item-padding-block, var(--ds-navbar-base-sidebar-item-padding-block)));--_navbar-sidebar-item-padding-inline: var(--navbar-sidebar-item-padding-inline, var(--mod-navbar-sidebar-item-padding-inline, var(--ds-navbar-base-sidebar-item-padding-inline)));--_navbar-sidebar-item-font-size: var(--navbar-sidebar-item-font-size, var(--mod-navbar-sidebar-item-font-size, var(--ds-navbar-base-sidebar-item-font-size)));--_navbar-sidebar-item-font-weight: var(--navbar-sidebar-item-font-weight, var(--mod-navbar-sidebar-item-font-weight, var(--ds-navbar-base-sidebar-item-font-weight)));--_navbar-sidebar-item-font-family: var(--navbar-sidebar-item-font-family, var(--mod-navbar-sidebar-item-font-family, var(--ds-navbar-base-sidebar-item-font-family)));--_navbar-sidebar-item-color: var(--navbar-sidebar-item-color, var(--mod-navbar-sidebar-item-color, var(--ds-navbar-base-sidebar-item-color-base)));--_navbar-sidebar-item-background-active: var(--navbar-sidebar-item-background-active, var(--mod-navbar-sidebar-item-background-active, var(--ds-navbar-base-sidebar-item-background-active)));--_navbar-sidebar-item-background-hover: var(--navbar-sidebar-item-background-hover, var(--mod-navbar-sidebar-item-background-hover, var(--ds-navbar-base-sidebar-item-background-hover)));--_navbar-sidebar-item-color-hover: var(--navbar-sidebar-item-color-hover, var(--mod-navbar-sidebar-item-color-hover, var(--ds-navbar-base-sidebar-item-color-hover)));--_navbar-sidebar-item-color-active: var(--navbar-sidebar-item-color-active, var(--mod-navbar-sidebar-item-color-active, var(--ds-navbar-base-sidebar-item-color-active)));--_navbar-sidebar-item-divider-color: var(--navbar-sidebar-item-divider-color, var(--mod-navbar-sidebar-item-divider-color, var(--ds-navbar-base-sidebar-item-divider-color)));--_navbar-sidebar-item-divider-color-active: var(--navbar-sidebar-item-divider-color-active, var(--mod-navbar-sidebar-item-divider-color-active, var(--ds-navbar-base-sidebar-item-divider-color-active)));--_navbar-sidebar-item-chevron-size: var(--navbar-sidebar-item-chevron-size, var(--mod-navbar-sidebar-item-chevron-size, var(--ds-navbar-base-sidebar-item-chevron-size)));--_navbar-sidebar-item-chevron-color: var(--navbar-sidebar-item-chevron-color, var(--mod-navbar-sidebar-item-chevron-color, var(--ds-navbar-base-sidebar-item-chevron-color)));--_navbar-menu-gap: var(--navbar-menu-gap, var(--mod-navbar-menu-gap, var(--ds-navbar-base-menu-gap)));--_navbar-menu-start-gap: var(--navbar-menu-start-gap, var(--mod-navbar-menu-start-gap, var(--ds-navbar-base-menu-start-gap)));--_navbar-menu-item-color: var(--navbar-menu-item-color, var(--mod-navbar-menu-item-color, var(--ds-navbar-base-menu-item-color-base)));--_navbar-menu-item-font-size: var(--navbar-menu-item-font-size, var(--mod-navbar-menu-item-font-size, var(--ds-navbar-base-menu-item-font-size)));--_navbar-menu-item-padding-block: var(--navbar-menu-item-padding-block, var(--mod-navbar-menu-item-padding-block, var(--ds-navbar-base-menu-item-padding-block)));--_navbar-menu-item-padding-inline: var(--navbar-menu-item-padding-inline, var(--mod-navbar-menu-item-padding-inline, var(--ds-navbar-base-menu-item-padding-inline)));--_navbar-menu-item-border-radius: var(--navbar-menu-item-border-radius, var(--mod-navbar-menu-item-border-radius, var(--ds-navbar-base-menu-item-border-radius)));--_navbar-menu-item-color-hover: var(--navbar-menu-item-color-hover, var(--mod-navbar-menu-item-color-hover, var(--ds-navbar-base-menu-item-color-hover)));--_navbar-menu-item-color-selected: var(--navbar-menu-item-color-selected, var(--mod-navbar-menu-item-color-selected, var(--ds-navbar-base-menu-item-color-selected)));--_navbar-menu-item-color-selected-hover: var(--navbar-menu-item-color-selected-hover, var(--mod-navbar-menu-item-color-selected-hover, var(--ds-navbar-base-menu-item-color-selected-hover)));--_navbar-menu-item-color-active: var(--navbar-menu-item-color-active, var(--mod-navbar-menu-item-color-active, var(--ds-navbar-base-menu-item-color-active)));--_navbar-menu-item-underline-height: var(--navbar-menu-item-underline-height, var(--mod-navbar-menu-item-underline-height, var(--ds-global-size-border-2)));--_navbar-menu-item-underline-border-radius: var(--navbar-menu-item-underline-border-radius, var(--mod-navbar-menu-item-underline-border-radius, var(--ds-alias-radius-rounded)));--_navbar-menu-item-transition-duration: var(--navbar-menu-item-transition-duration, var(--mod-navbar-menu-item-transition-duration, var(--ds-navbar-base-menu-item-transition-duration)));--_navbar-menu-end-gap: var(--navbar-menu-end-gap, var(--mod-navbar-menu-end-gap, var(--ds-navbar-base-menu-end-gap)));--_navbar-container-gap: var(--navbar-container-gap, var(--mod-navbar-container-gap, var(--ds-navbar-base-container-gap)));--_navbar-content-gap: var(--navbar-content-gap, var(--mod-navbar-content-gap, var(--ds-navbar-base-content-gap)));--_navbar-button-color-text: var(--navbar-button-color-text, var(--mod-navbar-button-color-text, var(--ds-navbar-base-button-color-text-base)));--_navbar-button-color-background: var(--navbar-button-color-background, var(--mod-navbar-button-color-background, var(--ds-navbar-base-button-color-background-base)));--_navbar-button-color-border: var(--navbar-button-color-border, var(--mod-navbar-button-color-border, var(--ds-navbar-base-button-color-border-base)));--_navbar-button-color-text-hover: var(--navbar-button-color-text-hover, var(--mod-navbar-button-color-text-hover, var(--ds-navbar-base-button-color-text-hover)));--_navbar-button-color-background-hover: var(--navbar-button-color-background-hover, var(--mod-navbar-button-color-background-hover, var(--ds-navbar-base-button-color-background-hover)));--_navbar-button-color-border-hover: var(--navbar-button-color-border-hover, var(--mod-navbar-button-color-border-hover, var(--ds-navbar-base-button-color-border-hover)));--_navbar-button-color-text-active: var(--navbar-button-color-text-active, var(--mod-navbar-button-color-text-active, var(--ds-navbar-base-button-color-text-active)));--_navbar-button-color-background-active: var(--navbar-button-color-background-active, var(--mod-navbar-button-color-background-active, var(--ds-navbar-base-button-color-background-active)));--_navbar-button-color-border-active: var(--navbar-button-color-border-active, var(--mod-navbar-button-color-border-active, var(--ds-navbar-base-button-color-border-active)));--_navbar-focus-color-start: var(--navbar-focus-color-start, var(--mod-navbar-focus-color-start, var(--ds-navbar-base-focus-color-start)));--_navbar-focus-color-end: var(--navbar-focus-color-end, var(--mod-navbar-focus-color-end, var(--ds-navbar-base-focus-color-end)))}:host{display:block;position:relative;z-index:var(--_navbar-z-index);width:100%;background-color:var(--_navbar-background);box-shadow:var(--_navbar-shadow)}#nav{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;height:var(--_navbar-height);max-height:var(--_navbar-height);box-sizing:border-box;position:relative}#container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;box-sizing:border-box;gap:var(--_navbar-container-gap);padding-left:var(--ds-alias-container-space-device);padding-right:var(--ds-alias-container-space-device);width:100%;max-width:var(--ds-alias-container-width-base)}#container.is-fluid{max-width:var(--ds-alias-container-width-fluid)}#container.is-compact{max-width:var(--ds-alias-container-width-compact)}#content{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex:1;gap:var(--_navbar-content-gap)}::slotted([slot=brand]){position:relative;display:flex;align-items:center;flex-shrink:0;gap:var(--_navbar-brand-gap)}::slotted(a[slot=brand]){position:relative;display:flex;align-items:center;flex-shrink:0;gap:var(--_navbar-brand-gap);outline:none}::slotted(a[slot=brand])::-moz-focus-inner{border:0}::slotted(a[slot=brand])::after{content:"";position:absolute;width:1px;height:1px;border-radius:var(--_navbar-brand-focus-radius);background-color:rgba(0,0,0,0);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}::slotted(a[slot=brand]:focus-visible)::after{padding:1rem;width:100%;height:100%;box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important}::slotted([slot=title]){color:var(--_navbar-title-color);font-family:var(--_navbar-title-font-family);font-size:var(--_navbar-title-font-size);font-weight:var(--_navbar-title-font-weight);display:none}@media screen and (min-width: 769px){::slotted([slot=title]){display:block}}#hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:var(--_navbar-hamburger-padding);color:var(--_navbar-button-color-text);background-color:var(--_navbar-button-color-background);width:var(--_navbar-hamburger-width);height:var(--_navbar-hamburger-height);border-radius:var(--_navbar-hamburger-radius);margin-left:auto;appearance:none;cursor:pointer;outline:none;--icon-color: var(--_navbar-button-color-text);touch-action:manipulation;transition-property:translate,color,background-color,border-color,box-shadow,text-shadow;transition-duration:var(--_navbar-hamburger-transition-duration);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}#hamburger::-moz-focus-inner{border:0}#hamburger:focus-visible{box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important}#hamburger:hover{color:var(--_navbar-button-color-text-hover);background-color:var(--_navbar-button-color-background-hover);--icon-color: var(--_navbar-button-color-text-hover)}#hamburger:active{color:var(--_navbar-button-color-text-active);background-color:var(--_navbar-button-color-background-active);--icon-color: var(--_navbar-button-color-text-active);translate:0 .5px}#sidebar{visibility:hidden;display:flex;justify-content:flex-end;position:fixed;top:var(--_navbar-height);right:0;bottom:0;left:0;z-index:var(--ds-alias-z-index-navigation);pointer-events:none;transition:visibility var(--_navbar-sidebar-slide-duration) ease}#sidebar.is-open{pointer-events:auto;visibility:visible}:host:not(.is-sidebar-mode) #sidebar{pointer-events:none !important;display:none !important;visibility:hidden !important}#sidebar-backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;transition:opacity var(--_navbar-sidebar-slide-duration) ease}#sidebar.is-open #sidebar-backdrop{opacity:1}#sidebar-panel{position:relative;display:flex;flex-direction:column-reverse;width:100%;max-width:var(--_navbar-sidebar-max-width);height:100%;background-color:var(--_navbar-sidebar-panel-background);overflow-y:auto;outline:none;box-shadow:var(--_navbar-shadow);border-top:var(--_navbar-sidebar-panel-border-top);transform:translateX(100%);transition:transform var(--_navbar-sidebar-slide-duration) ease}#sidebar.is-open #sidebar-panel{transform:translateX(0)}#sidebar-content{flex:1;display:flex;flex-direction:column;gap:var(--_navbar-sidebar-content-gap);padding-inline:var(--_navbar-sidebar-padding-inline);padding-block:var(--_navbar-sidebar-padding-block);overflow-y:auto}#sidebar-content ::slotted(a[slot=menu-start]),#sidebar-content ::slotted(.link[slot=menu-start]){position:relative;color:var(--_navbar-sidebar-item-color);--icon-color: var(--_navbar-sidebar-item-color);font-size:var(--_navbar-sidebar-item-font-size);font-weight:var(--_navbar-sidebar-item-font-weight);font-family:var(--_navbar-sidebar-item-font-family);text-decoration:none;min-height:var(--_navbar-sidebar-item-min-height);padding-block:var(--_navbar-sidebar-item-padding-block);padding-inline:var(--_navbar-sidebar-item-padding-inline);display:flex;align-items:center;justify-content:flex-start;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}#sidebar-content ::slotted(a[slot=menu-start])::-moz-focus-inner,#sidebar-content ::slotted(.link[slot=menu-start])::-moz-focus-inner{border:0}#sidebar-content ::slotted(a[slot=menu-start])::before,#sidebar-content ::slotted(.link[slot=menu-start])::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--ds-divider-width);border-radius:var(--ds-alias-radius-base);background-color:var(--_navbar-sidebar-item-divider-color);touch-action:manipulation;transition-property:border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);z-index:1}#sidebar-content ::slotted(a[slot=menu-start])::after,#sidebar-content ::slotted(.link[slot=menu-start])::after{content:"";position:absolute;right:.375rem;top:50%;transform:translateY(-50%);width:var(--_navbar-sidebar-item-chevron-size);height:var(--_navbar-sidebar-item-chevron-size);background-color:var(--_navbar-sidebar-item-chevron-color);mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10 10%22%3E%3Cpath d=%22M7.5,4.1l-4.1-3.9A.75.75,0,1,0,2.36,1.294L6.072,4.819a.249.249,0,0,1,0,.362L2.36,8.706A.75.75,0,0,0,3.393,9.794L7.51,5.884A1.256,1.256,0,0,0,7.5,4.1Z%22/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat}#sidebar-content ::slotted(.link[slot=menu-start][aria-current=page]),#sidebar-content ::slotted(a[slot=menu-start][aria-current=page]){background:var(--_navbar-sidebar-item-background-active)}#sidebar-content ::slotted(.link[slot=menu-start][aria-current=page])::before,#sidebar-content ::slotted(a[slot=menu-start][aria-current=page])::before{background-color:var(--_navbar-sidebar-item-divider-color-active)}#sidebar-content ::slotted(.link[slot=menu-start]:hover),#sidebar-content ::slotted(a[slot=menu-start]:hover){background:var(--_navbar-sidebar-item-background-hover);color:var(--_navbar-sidebar-item-color-hover);--icon-color: var(--_navbar-sidebar-item-color-hover)}#sidebar-content ::slotted(.link[slot=menu-start]:hover)::after,#sidebar-content ::slotted(a[slot=menu-start]:hover)::after{background-color:var(--_navbar-sidebar-item-color-hover)}#sidebar-content ::slotted(.link[slot=menu-start]:hover)::before,#sidebar-content ::slotted(a[slot=menu-start]:hover)::before{background-color:var(--_navbar-sidebar-item-color-hover)}#sidebar-content ::slotted(.link[slot=menu-start]:active),#sidebar-content ::slotted(a[slot=menu-start]:active){background:var(--_navbar-sidebar-item-background-active);color:var(--_navbar-sidebar-item-color-active);--icon-color: var(--_navbar-sidebar-item-color-active)}#sidebar-content ::slotted(.link[slot=menu-start]:active)::after,#sidebar-content ::slotted(a[slot=menu-start]:active)::after{background-color:var(--_navbar-sidebar-item-color-active)}#sidebar-content ::slotted(.link[slot=menu-start]:active)::before,#sidebar-content ::slotted(a[slot=menu-start]:active)::before{background-color:var(--_navbar-sidebar-item-color-active)}#sidebar-content ::slotted(.link[slot=menu-start]:focus-visible:not(:active))::before,#sidebar-content ::slotted(a[slot=menu-start]:focus-visible:not(:active))::before{border-radius:var(--ds-alias-radius-base);background-color:rgba(0,0,0,0);height:100%;width:100%;box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important}#sidebar-content #sidebar-end{display:flex;flex-direction:column;gap:var(--_navbar-content-gap);margin-top:var(--ds-global-size-space-32)}#sidebar-content ::slotted(ds-button[slot=menu-end]),#sidebar-content ::slotted(button[slot=menu-end]),#sidebar-content ::slotted(button.button[slot=menu-end]){width:100%;--button-width: 100%;--button-min-width: 100%}#menu{flex:1;display:flex;gap:var(--_navbar-menu-gap)}#menu #menu-start{display:flex;gap:var(--_navbar-menu-start-gap);flex:1;justify-content:flex-start;align-items:center}#menu #menu-start ::slotted(.link[slot=menu-start]),#menu #menu-start ::slotted(a[slot=menu-start]){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;position:relative;display:inline-flex;align-items:center;color:var(--_navbar-menu-item-color);font-size:var(--_navbar-menu-item-font-size);border-radius:var(--_navbar-menu-item-border-radius);padding-inline:var(--_navbar-menu-item-padding-inline);padding-block:var(--_navbar-menu-item-padding-block);text-decoration:none;outline:none;white-space:nowrap;transition:color 120ms ease;cursor:pointer;touch-action:manipulation;transition-property:box-shadow;transition-duration:var(--_navbar-menu-item-transition-duration);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}#menu #menu-start ::slotted(.link[slot=menu-start])::after,#menu #menu-start ::slotted(a[slot=menu-start])::after{content:"";position:absolute;bottom:-0.5rem;left:0;right:0;height:var(--_navbar-menu-item-underline-height);border-radius:var(--_navbar-menu-item-underline-border-radius);background-color:rgba(0,0,0,0);transition:background-color 120ms ease}#menu #menu-start ::slotted([slot=menu-start].is-active),#menu #menu-start ::slotted([slot=menu-start][aria-current=page]){font-weight:var(--ds-alias-text-weight-bold)}#menu #menu-start ::slotted([slot=menu-start].is-active)::after,#menu #menu-start ::slotted([slot=menu-start][aria-current=page])::after{background-color:var(--_navbar-menu-item-color-selected)}#menu #menu-start ::slotted(.link[slot=menu-start]:hover),#menu #menu-start ::slotted(a[slot=menu-start]:hover){color:var(--_navbar-menu-item-color-hover);--icon-color: var(--_navbar-menu-item-color-hover)}#menu #menu-start ::slotted(.link[slot=menu-start]:hover)::after,#menu #menu-start ::slotted(a[slot=menu-start]:hover)::after{background-color:var(--_navbar-menu-item-color-hover)}#menu #menu-start ::slotted(.link[slot=menu-start]:active),#menu #menu-start ::slotted(a[slot=menu-start]:active){color:var(--_navbar-menu-item-color-active);--icon-color: var(--_navbar-menu-item-color-active)}#menu #menu-start ::slotted(.link[slot=menu-start]:active)::after,#menu #menu-start ::slotted(a[slot=menu-start]:active)::after{background-color:var(--_navbar-menu-item-color-active)}#menu #menu-start{touch-action:manipulation;transition-property:box-shadow;transition-duration:var(--_navbar-menu-item-transition-duration);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}#menu #menu-start ::slotted(.link[slot=menu-start]:focus-visible),#menu #menu-start ::slotted(a[slot=menu-start]:focus-visible){box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important}#menu #menu-end{display:flex;gap:var(--_navbar-menu-end-gap);justify-content:flex-end;align-items:center}#menu #menu-end ::slotted(ds-button[slot=menu-end]),#menu #menu-end ::slotted(.button[slot=menu-end]),#menu #menu-end ::slotted(button[slot=menu-end]){--button-focus-shadow: var(--_navbar-focus-color-end);--button-color-text: var(--_navbar-button-color-text);--button-color-background: var(--_navbar-button-color-background);--button-color-border: var(--_navbar-button-color-border);--button-color-text-hover: var(--_navbar-button-color-text-hover);--button-color-background-hover: var(--_navbar-button-color-background-hover);--button-color-border-hover: var(--_navbar-button-color-border-hover);--button-color-text-active: var(--_navbar-button-color-text-active);--button-color-background-active: var(--_navbar-button-color-background-active);--button-color-border-active: var(--_navbar-button-color-border-active)}#actions{display:flex;gap:var(--_navbar-menu-end-gap);justify-content:flex-end;align-items:center}#actions ::slotted(ds-button[slot=actions]),#actions ::slotted(.button[slot=actions]),#actions ::slotted(button[slot=actions]){--button-focus-shadow: var(--_navbar-focus-color-end);--button-color-text: var(--_navbar-button-color-text);--button-color-background: var(--_navbar-button-color-background);--button-color-border: var(--_navbar-button-color-border);--button-color-text-hover: var(--_navbar-button-color-text-hover);--button-color-background-hover: var(--_navbar-button-color-background-hover);--button-color-border-hover: var(--_navbar-button-color-border-hover);--button-color-text-active: var(--_navbar-button-color-text-active);--button-color-background-active: var(--_navbar-button-color-background-active);--button-color-border-active: var(--_navbar-button-color-border-active)}:host(.is-light){--logo-color: var(--ds-navbar-light-title-color);--mod-navbar-background: var(--ds-navbar-light-background);--mod-navbar-title-color: var(--ds-navbar-light-title-color);--_navbar-focus-color-start: var(--ds-navbar-light-focus-color-start);--_navbar-focus-color-end: var(--ds-navbar-light-focus-color-end);--mod-navbar-menu-item-color: var(--ds-navbar-light-menu-item-color-base);--mod-navbar-menu-item-color-hover: var(--ds-navbar-light-menu-item-color-hover);--mod-navbar-menu-item-color-active: var(--ds-navbar-light-menu-item-color-active);--mod-navbar-menu-item-color-selected: var(--ds-navbar-light-menu-item-color-selected);--mod-navbar-sidebar-panel-border-top: var(--ds-navbar-light-sidebar-panel-border-top);--mod-navbar-button-color-text: var(--ds-navbar-light-button-color-text-base);--mod-navbar-button-color-background: var(--ds-navbar-light-button-color-background-base);--mod-navbar-button-color-border: var(--ds-navbar-light-button-color-border-base);--mod-navbar-button-color-text-hover: var(--ds-navbar-light-button-color-text-hover);--mod-navbar-button-color-background-hover: var(--ds-navbar-light-button-color-background-hover);--mod-navbar-button-color-border-hover: var(--ds-navbar-light-button-color-border-hover);--mod-navbar-button-color-text-active: var(--ds-navbar-light-button-color-text-active);--mod-navbar-button-color-background-active: var(--ds-navbar-light-button-color-background-active);--mod-navbar-button-color-border-active: var(--ds-navbar-light-button-color-border-active)}

package/dist/collection/components/navbar/navbar.i18n.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsNavbar = {
+    de: {
+        mainNavigation: 'Hauptnavigation',
+        openMenu: 'Navigationsmenu öffnen',
+        closeMenu: 'Navigationsmenu schließen',
+        navigationMenu: 'Navigationsmenü',
+    },
+    en: {
+        mainNavigation: 'Main navigation',
+        openMenu: 'Open navigation menu',
+        closeMenu: 'Close navigation menu',
+        navigationMenu: 'Navigation menu',
+    },
+    fr: {
+        mainNavigation: 'Navigation principale',
+        openMenu: 'Ouvrir le menu de navigation',
+        closeMenu: 'Fermer le menu de navigation',
+        navigationMenu: 'Menu de navigation',
+    },
+    it: {
+        mainNavigation: 'Navigazione principale',
+        openMenu: 'Apri menu di navigazione',
+        closeMenu: 'Chiudi menu di navigazione',
+        navigationMenu: 'Menu di navigazione',
+    },
+    nl: {
+        mainNavigation: 'Hoofdnavigatie',
+        openMenu: 'Navigatiemenu openen',
+        closeMenu: 'Navigatiemenu sluiten',
+        navigationMenu: 'Navigatiemenu',
+    },
+    es: {
+        mainNavigation: 'Navegación principal',
+        openMenu: 'Abrir menú de navegación',
+        closeMenu: 'Cerrar menú de navegación',
+        navigationMenu: 'Menú de navegación',
+    },
+    pl: {
+        mainNavigation: 'Nawigacja główna',
+        openMenu: 'Otwórz menu nawigacji',
+        closeMenu: 'Zamknij menu nawigacji',
+        navigationMenu: 'Menu nawigacji',
+    },
+    pt: {
+        mainNavigation: 'Navegação principal',
+        openMenu: 'Abrir menu de navegação',
+        closeMenu: 'Fechar menu de navegação',
+        navigationMenu: 'Menu de navegação',
+    },
+    sv: {
+        mainNavigation: 'Huvudnavigering',
+        openMenu: 'Öppna navigationsmeny',
+        closeMenu: 'Stäng navigationsmeny',
+        navigationMenu: 'Navigationsmeny',
+    },
+    fi: {
+        mainNavigation: 'Päänavigaatio',
+        openMenu: 'Avaa navigointivalikko',
+        closeMenu: 'Sulje navigointivalikko',
+        navigationMenu: 'Navigointivalikko',
+    },
+};

package/dist/collection/components/navbar/navbar.interfaces.js

@@ -0,0 +1,6 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+export const NAVBAR_CONTAINERS = ['default', 'fluid', 'compact', ''];