@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-side-navigation/ic-side-navigation.css

@@ -5,6 +5,7 @@
 :host {
   display: block;
 
+  --ic-typography-color: currentcolor;
   --side-navigation-position: fixed;
   --side-navigation-position-left: 0;
   --side-navigation-position-top: var(--ic-space-xxl);
@@ -16,7 +17,11 @@
   );
   --side-navigation-width: 20rem;
   --sm-side-navigation-bottom-bar-height: 3.5rem;
+  --keyline-lighten: var(--ic-space-1px) solid var(--ic-side-navigation-keyline);
+  --keyline-darken: var(--ic-space-1px) solid var(--ic-state-layer-darken-20);
 
+  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
+  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);
   z-index: var(--ic-z-index-side-navigation);
 }
 
@@ -28,16 +33,16 @@
   display: flex;
   flex-direction: column;
   width: var(--side-navigation-width);
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
   position: var(--side-navigation-position);
   top: var(--side-navigation-position-top);
   left: calc(var(--side-navigation-width) * -1);
   bottom: 0;
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-side-navigation-background);
   z-index: var(--ic-z-index-side-navigation);
 }
 
-:host(.inline) .side-navigation {
+:host(.ic-side-navigation-inline) .side-navigation {
   position: absolute;
   height: 100%;
 }
@@ -57,14 +62,14 @@
 }
 
 .side-navigation-inner {
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-side-navigation-background);
   display: flex;
   flex-direction: column;
   flex: 1 1 0;
   overflow: auto;
 }
 
-:host(.inline) .side-navigation-inner {
+:host(.ic-side-navigation-inline) .side-navigation-inner {
   flex: 1;
 }
 
@@ -98,22 +103,22 @@
 }
 
 .bottom-wrapper {
-  border-top: var(--ic-keyline-lighten);
+  border-top: var(--keyline-lighten);
   bottom: 0;
   left: 0;
   z-index: 2;
   box-shadow: -0.188rem -0.188rem 0.5rem rgb(0 0 0 / 20%);
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-side-navigation-background);
   display: flex;
   flex-direction: column;
 }
 
-:host(.inline) .bottom-wrapper {
+:host(.ic-side-navigation-inline) .bottom-wrapper {
   position: sticky;
 }
 
-:host(.dark) .bottom-wrapper {
-  border-top: var(--ic-keyline-darken);
+:host(.ic-side-navigation-dark) .bottom-wrapper {
+  border-top: var(--keyline-darken);
 }
 
 /* Mobile Top Bar */
@@ -125,39 +130,43 @@
   min-height: var(--side-navigation-height);
   padding: var(--ic-space-xs);
   box-sizing: border-box;
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-side-navigation-background);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  border-bottom: var(--ic-keyline-darken);
+  border-bottom: var(--keyline-lighten);
   box-shadow: var(--ic-elevation-overlay);
   z-index: 2;
   overflow: hidden;
   visibility: visible;
 }
 
-:host(.inline) .top-bar {
+:host(.ic-side-navigation-inline) .top-bar {
   position: absolute;
 }
 
-.top-bar.dark a:focus {
-  box-shadow: var(--ic-border-focus);
+:host(.ic-side-navigation-dark) .top-bar {
+  border-bottom: var(--keyline-darken);
 }
 
-.top-bar.light {
-  border-bottom: var(--ic-keyline-lighten);
+.top-bar.dark a:focus {
+  box-shadow: var(--ic-border-focus);
 }
 
 .app-title-wrapper {
   display: flex;
   margin-left: var(--ic-space-xs);
-  border-left: var(--ic-keyline-darken);
+  border-left: var(--keyline-lighten);
   padding-left: var(--ic-space-xxs);
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
   align-items: center;
 }
 
+:host(.ic-side-navigation-dark) .app-title-wrapper {
+  border-left: var(--keyline-darken);
+}
+
 .app-title-wrapper ic-typography h1 {
   margin: 0;
 }
@@ -175,17 +184,17 @@
     background-color var(--ic-easing-transition-fast);
   text-decoration: none;
   padding: var(--ic-space-xxs);
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
 }
 
 :host .title-link:visited,
 :host .title-link:active {
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
 }
 
 slot[name="app-title"]::slotted(a),
 slot[name="app-icon"]::slotted(a) {
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
   outline: none;
   text-decoration: none;
   display: flex;
@@ -218,11 +227,11 @@ slot[name="app-title"]::slotted(a) {
 
 :host .title-link:hover {
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-theme-hover);
+  background-color: var(--ic-side-navigation-hover);
 }
 
 :host .title-link:active {
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-side-navigation-pressed);
 }
 
 :host .title-link:focus,
@@ -241,7 +250,7 @@ slot[name="app-title"]::slotted(a) {
 }
 
 .app-title-wrapper ::slotted(svg) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-side-navigation-text);
 }
 
 .app-icon-container {
@@ -284,8 +293,8 @@ slot[name="app-title"]::slotted(a) {
 .app-status-wrapper .app-status {
   display: flex;
   border-radius: 1rem;
-  background-color: var(--ic-theme-text);
-  color: var(--ic-color-primary-text);
+  background-color: var(--ic-side-navigation-text);
+  color: var(--ic-side-navigation-status-tag-text);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   min-width: 1rem;
 }
@@ -294,8 +303,8 @@ slot[name="app-title"]::slotted(a) {
   overflow-wrap: break-word;
 }
 
-:host(.dark) .app-status-wrapper .app-status {
-  color: var(--ic-color-white-text);
+:host(.ic-side-navigation-dark) .app-status-wrapper .app-status {
+  --ic-typography-color: var(--ic-architectural-white);
 }
 
 .navigation-landmark-title {
@@ -313,11 +322,11 @@ slot[name="app-title"]::slotted(a) {
   --navigation-group-height: 2.75rem;
   --navigation-group-width: 100%;
   --navigation-group-justify-content: space-between;
-  --navigation-group-hover: var(--ic-theme-hover);
-  --navigation-group-text-hover: var(--ic-theme-text);
+  --navigation-group-hover: var(--ic-side-navigation-hover);
+  --navigation-group-text-hover: var(--ic-side-navigation-text);
   --navigation-item-child-height: 3.5rem;
-  --navigation-item-child-active: var(--ic-action-dark-bg-active);
-  --navigation-item-child-color: var(--ic-theme-text);
+  --navigation-item-child-active: var(--ic-action-dark-bg-pressed);
+  --navigation-item-child-color: var(--ic-side-navigation-text);
   --navigation-group-expand-toggle-padding: 0.25rem;
 }
 
@@ -341,7 +350,6 @@ slot[name="app-title"]::slotted(a) {
 .bottom-side-nav ic-divider {
   position: absolute;
   top: 0;
-  width: 100%;
 }
 
 .primary-navigation {
@@ -401,7 +409,7 @@ slot[name="app-title"]::slotted(a) {
   box-shadow: -0.188rem 0.188rem 0.5rem rgb(0 0 0 / 20%);
 }
 
-:host(.inline.side-display) .top-bar {
+:host(.ic-side-navigation-inline.side-display) .top-bar {
   position: sticky;
 }
 
@@ -443,7 +451,7 @@ slot[name="app-title"]::slotted(a) {
   bottom: auto;
 }
 
-:host(.inline.side-display) .side-navigation {
+:host(.ic-side-navigation-inline.side-display) .side-navigation {
   position: relative;
 }
 
@@ -518,7 +526,7 @@ slot[name="app-title"]::slotted(a) {
   padding-left: var(--ic-space-md);
   height: var(--sm-side-navigation-top-bar-height);
   width: 100%;
-  color: var(--ic-theme-text);
+  color: var(--ic-side-navigation-text);
   background-color: transparent;
   outline: var(--ic-hc-focus-outline);
   border: none;
@@ -540,7 +548,7 @@ slot[name="app-title"]::slotted(a) {
 }
 
 :host(.side-display) .bottom-side-nav .menu-expand-button:hover {
-  background-color: var(--ic-theme-hover);
+  background-color: var(--ic-side-navigation-hover);
 }
 
 :host(.side-display) .bottom-side-nav .menu-expand-button:focus {
@@ -582,16 +590,16 @@ slot[name="app-title"]::slotted(a) {
 :host(.sm-collapsed.side-display) ::slotted(ic-navigation-item),
 :host(.sm-collapsed.side-display) ::slotted(ic-navigation-group) {
   --navigation-item-label-opacity: 0;
-  --navigation-item-min-height: 56px;
-  --navigation-item-height: 56px;
+  --navigation-item-min-height: 3.5rem;
+  --navigation-item-height: 3.5rem;
 }
 
 :host(.sm-expanded.side-display) ::slotted(ic-navigation-item),
 :host(.sm-expanded.side-display) ::slotted(ic-navigation-group) {
   --navigation-item-label-opacity: 1;
   --navigation-item-height: auto;
-  --navigation-item-min-height: 56px;
-  --navigation-item-width: 320px;
+  --navigation-item-min-height: 3.5rem;
+  --navigation-item-width: 20rem;
   --navigation-item-side-nav-right: var(--ic-space-xl);
 }
 
@@ -647,6 +655,15 @@ slot[name="app-title"]::slotted(a) {
 
 /* Media Queries */
 
+@media screen and (max-width: 419px) {
+  .top-bar {
+    height: var(--side-navigation-height);
+  }
+  .side-navigation {
+    width: 100%;
+  }
+}
+
 @media screen and (min-width: 340px) {
   .app-icon-container {
     display: flex;
@@ -669,7 +686,7 @@ slot[name="app-title"]::slotted(a) {
 @media (forced-colors: active) {
   .side-navigation,
   .top-bar {
-    border-right: var(--ic-hc-border);
+    border-right: var(--ic-border-hc);
   }
 
   .menu-expand-button {

package/dist/collection/components/ic-side-navigation/ic-side-navigation.js

@@ -2,8 +2,8 @@ import { Host, h, } from "@stencil/core";
 import menuIcon from "../../assets/hamburger-menu-icon.svg";
 import closeIcon from "../../assets/close-icon.svg";
 import chevronIcon from "../../assets/chevron-icon.svg";
-import { getCurrentDeviceSize, DEVICE_SIZES, checkResizeObserver, isSlotUsed, getThemeForegroundColor, getCssProperty, hasClassificationBanner, onComponentRequiredPropUndefined, isEmptyString, isPropDefined, } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { getCurrentDeviceSize, DEVICE_SIZES, checkResizeObserver, isSlotUsed, getBrandForegroundAppearance, getCssProperty, hasClassificationBanner, onComponentRequiredPropUndefined, isEmptyString, isPropDefined, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -19,7 +19,7 @@ export class SideNavigation {
         this.COLLAPSED_ICON_LABELS_START = "collapsed-icon-labels-start";
         this.menuButton = null;
         this.emitSideNavigationExpanded = (objDetails) => {
-            this.sideNavExpanded.emit({
+            this.icSideNavExpanded.emit({
                 sideNavExpanded: objDetails.sideNavExpanded,
                 sideNavMobile: objDetails.sideNavMobile,
             });
@@ -200,11 +200,9 @@ export class SideNavigation {
                 navItems[0].querySelector("div");
             const navItemSVG = navItems[0].querySelector("svg");
             const navStyles = {
-                gap: navItemLink ? window.getComputedStyle(navItemLink).gap : "0",
-                iconWidth: navItemSVG ? window.getComputedStyle(navItemSVG).width : "0",
-                paddingLeft: navItemLink
-                    ? window.getComputedStyle(navItemLink).paddingLeft
-                    : "0",
+                gap: window.getComputedStyle(navItemLink).gap,
+                iconWidth: window.getComputedStyle(navItemSVG).width,
+                paddingLeft: window.getComputedStyle(navItemLink).paddingLeft,
             };
             return Object.values(navStyles).reduce((prev, curr) => {
                 return (prev += parseInt(curr));
@@ -247,12 +245,10 @@ export class SideNavigation {
          * @param value - padding-top css value
          */
         this.setParentPaddingTop = (value) => {
-            var _a;
-            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-top", value);
+            this.el.parentElement.style.setProperty("padding-top", value);
         };
         this.setParentPaddingLeft = (value) => {
-            var _a;
-            (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("padding-left", value);
+            this.el.parentElement.style.setProperty("padding-left", value);
         };
         this.renderAppTitle = (isAppNameSubtitleVariant) => {
             const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);
@@ -263,7 +259,7 @@ export class SideNavigation {
                     : undefined }, h("h1", null, displayShortAppTitle ? this.shortAppTitle : this.appTitle)));
         };
         this.resizeObserverCallback = (currSize) => {
-            var _a, _b, _c;
+            var _a;
             this.deviceSize = currSize;
             const isSmallAndDisableTopBar = currSize === DEVICE_SIZES.S && !this.disableTopBarBehaviour;
             if (!this.disableAutoParentStyling) {
@@ -272,10 +268,10 @@ export class SideNavigation {
                 if (isSmallAndDisableTopBar)
                     this.setParentPaddingLeft("0");
                 if (isSmallAndDisableTopBar && this.inline) {
-                    (_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
+                    this.el.parentElement.style.setProperty("height", `calc(100% - ${topBarHeight}px)`);
                 }
                 else if (!isSmallAndDisableTopBar) {
-                    (_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.style.setProperty("height", "100%");
+                    this.el.parentElement.style.setProperty("height", "100%");
                 }
             }
             if (!this.disableAutoParentStyling) {
@@ -332,11 +328,13 @@ export class SideNavigation {
             return (h("div", { class: {
                     "top-bar": true,
                     [this.foregroundColor]: true,
-                } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", appearance: foregroundColor, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, h("span", { class: "mobile-top-bar-menu-icon", slot: "icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("div", { class: "app-title-inner-wrapper" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
+                } }, isSDevice && (h("nav", { "aria-labelledby": "menu-navigation-toggle-button-landmark", "aria-hidden": "false" }, h("ic-button", { "aria-label": "Open navigation menu", class: "menu-button", id: "menu-button", variant: "secondary", size: "small", "full-width": "true", theme: foregroundColor == "default" || foregroundColor == "light"
+                    ? "light"
+                    : "dark", monochrome: true, onClick: this.toggleMenu, ariaOwnsId: "side-navigation", "aria-haspopup": "true", "aria-expanded": "false", ref: (el) => (this.menuButton = el) }, h("span", { class: "mobile-top-bar-menu-icon", slot: "left-icon", innerHTML: menuOpen ? closeIcon : menuIcon }), menuOpen ? "Close" : "Menu"), h("span", { id: "menu-navigation-toggle-button-landmark", class: "navigation-landmark-title", "aria-hidden": "true" }, "Navigation menu toggle button"))), h("div", { class: "app-title-wrapper" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (h(Component, Object.assign({}, attrs, { class: "title-link" }), h("div", { class: "app-icon-container", "aria-hidden": "true" }, h("slot", { name: "app-icon" })), h("div", { class: "app-title-inner-wrapper" }, isSlotUsed(this.el, "app-title") ? (h("slot", { name: "app-title" })) : (this.renderAppTitle(isAppNameSubtitleVariant))))))));
         };
         this.deviceSize = getCurrentDeviceSize();
         this.deviceSizeAppTitle = DEVICE_SIZES.S;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.hasSecondaryNavigation = false;
         this.menuExpanded = false;
         this.menuOpen = false;
@@ -382,7 +380,7 @@ export class SideNavigation {
         }
         (_a = this.el) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", this.transitionEndHandler);
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     render() {
@@ -406,9 +404,9 @@ export class SideNavigation {
                 "sm-collapsed": !isSDevice && !menuExpanded,
                 "sm-expanded": !isSDevice && menuExpanded,
                 "side-display": this.deviceSize > DEVICE_SIZES.S || this.disableTopBarBehaviour,
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && collapsedIconLabels,
-                ["inline"]: inline,
+                ["ic-side-navigation-inline"]: inline,
             } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { class: "navigation-list" }, h("slot", { name: "primary-navigation" }))))), h("div", { class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
@@ -642,8 +640,8 @@ export class SideNavigation {
     }
     static get events() {
         return [{
-                "method": "sideNavExpanded",
-                "name": "sideNavExpanded",
+                "method": "icSideNavExpanded",
+                "name": "icSideNavExpanded",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -673,8 +671,8 @@ export class SideNavigation {
     }
     static get listeners() {
         return [{
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false