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

package/dist/cjs/ds-navbar.cjs.entry.js

@@ -0,0 +1,359 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var focus = require('./focus-D3VVgpM7.js');
+var scroll = require('./scroll-CUuEh4xd.js');
+var breakpoints_subject = require('./breakpoints.subject-XNcGwhzh.js');
+var resize_decorator = require('./resize.decorator-DWM_fQgv.js');
+var type = require('./type-hmc4CJcO.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+var breakpoints_decorator = require('./breakpoints.decorator-C-Qm21UK.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./listener-BwB_xent.js');
+require('./device-BnjBOLnP.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.js');
+
+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',
+    },
+};
+
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+const NAVBAR_CONTAINERS = ['default', 'fluid', 'compact', ''];
+
+const navbarHostCss = () => `: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);-webkit-box-shadow:var(--_navbar-shadow);box-shadow:var(--_navbar-shadow)}#nav{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:var(--_navbar-height);max-height:var(--_navbar-height);-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}#container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-sizing:border-box;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:var(--_navbar-content-gap)}::slotted([slot=brand]){position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;gap:var(--_navbar-brand-gap)}::slotted(a[slot=brand]){position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;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);-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}::slotted(a[slot=brand]:focus-visible)::after{padding:1rem;width:100%;height:100%;-webkit-box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;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;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;--icon-color:var(--_navbar-button-color-text);-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:translate,color,background-color,border-color,text-shadow,-webkit-box-shadow;transition-property:translate,color,background-color,border-color,text-shadow,-webkit-box-shadow;transition-property:translate,color,background-color,border-color,box-shadow,text-shadow;transition-property:translate,color,background-color,border-color,box-shadow,text-shadow,-webkit-box-shadow;-webkit-transition-duration:var(--_navbar-hamburger-transition-duration);transition-duration:var(--_navbar-hamburger-transition-duration);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}#hamburger::-moz-focus-inner{border:0}#hamburger:focus-visible{-webkit-box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important;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:-ms-flexbox;display:flex;-ms-flex-pack:end;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;-webkit-transition:visibility var(--_navbar-sidebar-slide-duration) ease;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);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;-webkit-transition:opacity var(--_navbar-sidebar-slide-duration) ease;transition:opacity var(--_navbar-sidebar-slide-duration) ease}#sidebar.is-open #sidebar-backdrop{opacity:1}#sidebar-panel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;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;-webkit-box-shadow:var(--_navbar-shadow);box-shadow:var(--_navbar-shadow);border-top:var(--_navbar-sidebar-panel-border-top);-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform var(--_navbar-sidebar-slide-duration) ease;transition:-webkit-transform var(--_navbar-sidebar-slide-duration) ease;transition:transform var(--_navbar-sidebar-slide-duration) ease;transition:transform var(--_navbar-sidebar-slide-duration) ease, -webkit-transform var(--_navbar-sidebar-slide-duration) ease}#sidebar.is-open #sidebar-panel{-webkit-transform:translateX(0);transform:translateX(0)}#sidebar-content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:color,background-color,border-color,-webkit-box-shadow;transition-property:color,background-color,border-color,-webkit-box-shadow;transition-property:color,background-color,border-color,box-shadow;transition-property:color,background-color,border-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);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);-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:border-color,-webkit-box-shadow;transition-property:border-color,-webkit-box-shadow;transition-property:border-color,box-shadow;transition-property:border-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);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%;-webkit-transform:translateY(-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);-webkit-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-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");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;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%;-webkit-box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important;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:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;gap:var(--_navbar-menu-gap)}#menu #menu-start{display:-ms-flexbox;display:flex;gap:var(--_navbar-menu-start-gap);-ms-flex:1;flex:1;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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;-webkit-transition:color 120ms ease;transition:color 120ms ease;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:var(--_navbar-menu-item-transition-duration);transition-duration:var(--_navbar-menu-item-transition-duration);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);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);-webkit-transition:background-color 120ms ease;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{-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:var(--_navbar-menu-item-transition-duration);transition-duration:var(--_navbar-menu-item-transition-duration);-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);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){-webkit-box-shadow:var(--_navbar-focus-color-start) 0 0 0 2px,var(--_navbar-focus-color-end) 0 0 0 5px !important;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:-ms-flexbox;display:flex;gap:var(--_navbar-menu-end-gap);-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;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:-ms-flexbox;display:flex;gap:var(--_navbar-menu-end-gap);-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;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)}`;
+
+const Navbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsMenuOpenStart = index.createEvent(this, "dsMenuOpenStart");
+        this.dsMenuOpenEnd = index.createEvent(this, "dsMenuOpenEnd");
+        this.dsMenuCloseStart = index.createEvent(this, "dsMenuCloseStart");
+        this.dsMenuCloseEnd = index.createEvent(this, "dsMenuCloseEnd");
+        this.navEl = null;
+        this.sidebarEl = null;
+        this.burgerButton = null;
+        this.containerEl = null;
+        this.scrollHandler = new scroll.ScrollHandler();
+        this.focusHandler = new focus.FocusHandler();
+        this.burgerModeThresholdWidth = null;
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        this.isTouch = breakpoints_subject.dsBreakpoints.isTouch;
+        this.isSidebarOpen = false;
+        this.isOverflowing = false;
+        /**
+         * If `true` the navbar will open the sidebar menu.
+         */
+        this.open = false;
+        /**
+         * If `true` the navbar will use a light color scheme.
+         */
+        this.light = false;
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = '';
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleHamburgerClick = () => {
+            this.toggleSidebar();
+        };
+        this.handleBackdropClick = () => {
+            this.closeSidebar();
+        };
+        this.handleDrawerClickBound = (event) => {
+            this.handleDrawerClick(event);
+        };
+        this.handleDrawerClick = (event) => {
+            const target = event.target;
+            if (target.tagName === 'A' || target.closest('a')) {
+                this.closeSidebar();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isSidebarOpen) {
+                event.preventDefault();
+                this.closeSidebar();
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        if (newValue) {
+            this.openSidebar();
+        }
+        else {
+            this.closeSidebar();
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.openChanged(this.open);
+        this.scrollHandler.connect();
+        this.focusHandler.connect();
+    }
+    componentDidLoad() {
+        this.checkNavbarOverflow();
+    }
+    disconnectedCallback() {
+        this.detachKeyboardListener();
+        this.detachSidebarClickListener();
+        this.focusHandler.disconnect();
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToBreakpoint(breakpoints) {
+        this.isTouch = breakpoints.touch;
+        const isSidebarMode = this.isTouch || this.isOverflowing;
+        if (!isSidebarMode && this.isSidebarOpen) {
+            this.setIsSidebarOpen(false);
+        }
+    }
+    /**
+     * @internal Listens to config changes and updates language/region state
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * @internal Listens to resize events and checks for content overflow
+     */
+    async listenToResize() {
+        this.checkNavbarOverflow();
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Toggles the sidebar menu open/closed state
+     */
+    async toggleSidebar() {
+        await this.setIsSidebarOpen(!this.isSidebarOpen);
+    }
+    /**
+     * Opens the sidebar menu
+     */
+    async openSidebar() {
+        await this.setIsSidebarOpen(true);
+    }
+    /**
+     * Closes the sidebar menu
+     */
+    async closeSidebar() {
+        await this.setIsSidebarOpen(false);
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    attachKeyboardListener() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    detachKeyboardListener() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    attachSidebarClickListener() {
+        if (this.sidebarEl) {
+            this.sidebarEl.addEventListener('click', this.handleDrawerClickBound);
+        }
+    }
+    detachSidebarClickListener() {
+        if (this.sidebarEl) {
+            this.sidebarEl.removeEventListener('click', this.handleDrawerClickBound);
+        }
+    }
+    checkNavbarOverflow() {
+        if (!this.navEl)
+            return;
+        if (!this.containerEl)
+            return;
+        const scrollWidth = this.containerEl.scrollWidth;
+        const clientWidth = this.containerEl.clientWidth;
+        const isOverflowing = scrollWidth > clientWidth;
+        const hysteresisMargin = 100;
+        if (isOverflowing && !this.isOverflowing) {
+            this.burgerModeThresholdWidth = clientWidth;
+            this.isOverflowing = true;
+            if (this.isSidebarOpen) {
+                this.setIsSidebarOpen(false);
+            }
+        }
+        else if (!isOverflowing && this.isOverflowing && this.burgerModeThresholdWidth) {
+            if (clientWidth > this.burgerModeThresholdWidth + hysteresisMargin) {
+                this.isOverflowing = false;
+                this.burgerModeThresholdWidth = null;
+            }
+        }
+    }
+    async setIsSidebarOpen(value) {
+        var _a;
+        if (value === this.isSidebarOpen)
+            return;
+        const isSidebarMode = this.isTouch || this.isOverflowing;
+        if (value) {
+            this.dsMenuOpenStart.emit();
+            this.isSidebarOpen = true;
+            if (isSidebarMode) {
+                this.attachKeyboardListener();
+                this.attachSidebarClickListener();
+                this.focusHandler.enable({ target: this.navEl, restoreElement: this.burgerButton });
+                (_a = this.burgerButton) === null || _a === void 0 ? void 0 : _a.focus();
+                this.scrollHandler.disable();
+            }
+            this.dsMenuOpenEnd.emit();
+        }
+        else {
+            this.dsMenuCloseStart.emit();
+            if (isSidebarMode) {
+                this.detachKeyboardListener();
+                this.detachSidebarClickListener();
+                this.focusHandler.disable();
+                this.focusHandler.restoreFocus();
+                this.scrollHandler.enable();
+            }
+            this.isSidebarOpen = false;
+            this.dsMenuCloseEnd.emit();
+        }
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const isTouch = this.isTouch;
+        const isMenuOpen = this.isSidebarOpen;
+        const isSidebarMode = isTouch || this.isOverflowing;
+        const i18n = i18nDsNavbar[this.language];
+        return (index.h(index.Host, { key: 'd1d6fe2b8427f6685b71ac943c6c25a77cc7d29a', class: {
+                'is-open': isMenuOpen,
+                'is-sidebar-mode': isSidebarMode,
+                'is-light': this.light,
+            } }, index.h("nav", { key: 'ad444ede1a0403f07f444ea0690a462278c8cd2b', ref: el => (this.navEl = el), id: "nav", role: "navigation", "aria-label": i18n.mainNavigation }, index.h("div", { key: '1283a81c4aea12968c29ce7acea013e0f5bd9517', id: "container", class: {
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            }, ref: el => (this.containerEl = el) }, index.h("slot", { key: '5ee4b6dfb635e7da66d997e32c888f9938f534ed', name: "brand" }), index.h("slot", { key: '1842957278e926ebbad94af2be4ed9e307514f15', name: "title" }), index.h("div", { key: '9a0d72133cfacf2ee5c2fc7b667eb5c3f8b4ff4c', id: "content" }, !isSidebarMode && (index.h("div", { key: '888c531c11e5c6608037c3f2ed65fa70e092b3e1', id: "menu" }, index.h("div", { key: '6c67c0a018968a4b876fb0649cf771a4bc3be8f3', id: "menu-start" }, index.h("slot", { key: '36645b41db88550fba4d98d79f83f036136f2de1', name: "menu-start" })), index.h("div", { key: '01d1b694734f14b12893b6f9725d77bbd87494ea', id: "menu-end" }, index.h("slot", { key: '98be249966e4f0139944631052e2fd0c8c1209b1', name: "menu-end" })))), index.h("div", { key: '78e6833390750a161561412abb2db338034a14a9', id: "actions" }, index.h("slot", { key: 'e8bf50d3790e69523952060fff33aaf61e1a80ad', name: "actions" }), isSidebarMode && (index.h("button", { key: 'd7ed939c79ee98919a158e2b713386b031404550', ref: el => (this.burgerButton = el), id: "hamburger", type: "button", title: isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-label": isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-expanded": isMenuOpen, "aria-controls": "sidebar", onClick: () => this.handleHamburgerClick() }, index.h("ds-icon", { key: '0c8a7c53544d7c2c0b7aac5e91f7ab32bfa857a6', name: isMenuOpen ? 'close' : 'menu-bars', size: "", color: "white" })))))), isSidebarMode && (index.h("aside", { key: '40ac910cfa7c5610311883bd92cb743601570f04', id: "sidebar", role: "dialog", "aria-modal": "true", "aria-label": i18n.navigationMenu, class: { 'is-open': isMenuOpen }, ref: el => (this.sidebarEl = el) }, index.h("div", { key: '59262ffc7c7d40659584fe4ffcd41d32606e7501', id: "sidebar-backdrop", onClick: this.handleBackdropClick }), index.h("div", { key: '1debe69728a1868e0680066a6efd7ba9fa0a0a22', id: "sidebar-panel", tabindex: "-1" }, index.h("div", { key: 'f1d380906397ec3e959013284fb3feaa489800d7', id: "sidebar-content" }, index.h("div", { key: 'bbe972dc6f5e96d66473e4301706838dadb6e85e', id: "sidebar-start" }, index.h("slot", { key: '7177345c52b8bc829417db81fb3d107de920ce15', name: "menu-start" })), index.h("div", { key: 'a416d3e2a3b5fb87555e7b7bbe1020a4b1998bae', id: "sidebar-end" }, index.h("slot", { key: '953903c4a9ae1007ae5cd3a294e3c091b534945b', name: "menu-end" })))))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('navbar'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Navbar.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Navbar.prototype, "open", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Navbar.prototype, "light", void 0);
+tslib_es6.__decorate([
+    oneOf.OneOf(NAVBAR_CONTAINERS),
+    tslib_es6.__metadata("design:type", String)
+], Navbar.prototype, "container", void 0);
+tslib_es6.__decorate([
+    breakpoints_decorator.ListenToBreakpoints(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Navbar.prototype, "listenToBreakpoint", null);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Navbar.prototype, "configChanged", null);
+tslib_es6.__decorate([
+    resize_decorator.ListenToResize(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", []),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Navbar.prototype, "listenToResize", null);
+Navbar.style = navbarHostCss();
+
+exports.ds_navbar = Navbar;

package/dist/cjs/ds-notification.cjs.entry.js

@@ -3,11 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var formControl = require('./form-control-Bno2tBGf.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var formControl = require('./form-control-CtMcJUuC.js');
+var hasValue = require('./has-value-DK0oRqXI.js');
 var tShirt = require('./t-shirt-AyhbnEdJ.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var type = require('./type-hmc4CJcO.js');
+var oneOf = require('./one-of-BZGRIMtQ.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const NOTIFICATION_SIZES = ['sm', 'md', 'lg', '', 'small', 'medium', 'large'];
 const NOTIFICATION_COLORS = [
@@ -65,17 +68,10 @@ const Notification = class {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = tShirt.normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-        this.size = tShirt.normalizeDeprecatedTShirtSize(this.size);
-    }
     componentDidLoad() {
         this.didLoad = true;
         this.dsDidLoad.emit();
@@ -96,24 +92,20 @@ const Notification = class {
      * ------------------------------------------------------
      */
     render() {
+        const size = tShirt.normalizeDeprecatedTShirtSize(this.size) || '';
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (index.h(index.Host, Object.assign({ key: 'fba49f38b57b8aeb384390ab0598d2d34b53152c' }, a11yAttributes, { class: {
+        return (index.h(index.Host, Object.assign({ key: '1edcd6336e71620b77dcdcd17ad0cd35b42b3b30' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
-                [`is-${this.color}`]: !!this.color,
-                [`is-${this.size}`]: !!this.size,
-            } }), index.h("section", { key: '386f8968955fd0eeb7b46e89adca731b84ae2f3b', id: "notification", part: "section" }, this.closable && (index.h("ds-close", { key: 'c6dcd83a7a89d5a081e3c8360a2dd3d02653ac85', part: "close", onClick: ev => {
+                [`is-${this.color}`]: hasValue.hasValue(this.color),
+                [`is-${size}`]: hasValue.hasValue(this.size),
+            } }), index.h("section", { key: '52d3b15486dc26950c64f4d20a6664abd2b98d79', id: "notification", part: "section" }, this.closable && (index.h("ds-close", { key: '5102d95443bd14776df77ebc80f274cfe9af5e43', part: "close", onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.close();
-            } })), this.heading && index.h("h2", { key: 'b660129e85391c5e9e916868f16e7275af9305df', part: "heading" }, this.heading), index.h("span", { key: '23a99ca6186f906ecfc69e65290bf424abb7c9f6' }, index.h("slot", { key: '5a276328a4438b0f8ca0a9a0702e61236e7eecd6' })))));
+            } })), hasValue.hasValue(this.heading) && index.h("h2", { key: '0805c258051a652a721a43e931a5592b59135dbc', part: "heading" }, this.heading), index.h("span", { key: '611f25893c7c7654df1ea374bb075752bcd07b86' }, index.h("slot", { key: '55724fb85349db975b4a089d7b433517572aad4f' })))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 tslib_es6.__decorate([
     tslib_es6.Logger('notification'),
@@ -122,27 +114,27 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Notification.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Notification.prototype, "alert", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Notification.prototype, "closable", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...NOTIFICATION_COLORS),
+    oneOf.OneOf(NOTIFICATION_COLORS),
     tslib_es6.__metadata("design:type", String)
 ], Notification.prototype, "color", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('string'),
+    type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Notification.prototype, "heading", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], Notification.prototype, "noIcon", void 0);
 tslib_es6.__decorate([
-    validate_decorator.ValidateOneOf(...NOTIFICATION_SIZES),
+    oneOf.OneOf(NOTIFICATION_SIZES),
     tslib_es6.__metadata("design:type", String)
 ], Notification.prototype, "size", void 0);
 Notification.style = notificationHostCss();