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

package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js

@@ -0,0 +1,366 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  disableHover: false,
+  maxLines: 3,
+  placement: "bottom",
+  label: "This is a description of the button",
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Tooltip",
+  component: "ic-tooltip",
+};
+
+export const Default = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This is a description of the button"
+      target="test-button-default"
+      id="ic-tooltip-test-button-default"
+      ><button
+        id="test-button-default"
+        aria-describedby="ic-tooltip-test-button-default"
+      >
+        Default
+      </button></ic-tooltip
+    >`,
+
+  name: "Default",
+  height: "100px",
+};
+
+export const UsingExternalMethod = {
+  render: (args) =>
+    html`<script>
+        let display = true;
+        document
+          .querySelector("#clickMe")
+          .addEventListener("click", handleDisplay);
+        const tooltip = document.querySelector("ic-tooltip");
+        function handleDisplay() {
+          tooltip.displayTooltip(display, display);
+          display = !display;
+        }
+      </script>
+      <button id="clickMe">Show tooltip</button>
+      <ic-tooltip
+        label="This is a description of the button"
+        target="test-button-default"
+        id="ic-tooltip-test-button-default"
+        ><button
+          id="test-button-default"
+          aria-describedby="ic-tooltip-test-button-default"
+        >
+          Default
+        </button></ic-tooltip
+      >`,
+
+  name: "Using external method",
+  height: "100px",
+};
+
+export const DisabledHover = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This shows 'Code' has been copied"
+      target="test-button-disable-hover"
+      id="ic-tooltip-test-button-disable-hover"
+      disable-hover="true"
+      ><button
+        id="test-button-disable-hover"
+        aria-labelledby="ic-tooltip-test-button-disable-hover"
+        onclick="navigator.clipboard.writeText('Code')"
+      >
+        Show tooltip
+      </button></ic-tooltip
+    >`,
+
+  name: "Disabled Hover",
+  height: "100px",
+};
+
+export const TopPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="top-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top-start"
+        target="test-button-top-start"
+      >
+        <button
+          id="test-button-top-start"
+          aria-describedby="ic-tooltip-test-button-top-start"
+        >
+          Top start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="top"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top"
+        target="test-button-top"
+      >
+        <button
+          id="test-button-top"
+          aria-describedby="ic-tooltip-test-button-top"
+        >
+          Top
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="top-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top-end"
+        target="test-button-top-end"
+      >
+        <button
+          id="test-button-top-end"
+          aria-describedby="ic-tooltip-test-button-top-end"
+        >
+          Top end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Top placements",
+};
+
+export const BottomPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="bottom-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom-start"
+        target="test-button-bottom-start"
+      >
+        <button
+          id="test-button-bottom-start"
+          aria-describedby="ic-tooltip-test-button-bottom-start"
+        >
+          Bottom start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="bottom"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom"
+        target="test-button-bottom"
+      >
+        <button
+          id="test-button-bottom"
+          aria-describedby="ic-tooltip-test-button-bottom"
+        >
+          Bottom
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="bottom-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom-end"
+        target="test-button-bottom-end"
+      >
+        <button
+          id="test-button-bottom-end"
+          aria-describedby="ic-tooltip-test-button-bottom-end"
+        >
+          Bottom end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Bottom placements",
+};
+
+export const RightPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="right-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right-start"
+        target="test-button-right-start"
+      >
+        <button
+          id="test-button-right-start"
+          aria-describedby="ic-tooltip-test-button-right-start"
+        >
+          Right start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="right"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right"
+        target="test-button-right"
+      >
+        <button
+          id="test-button-right"
+          aria-describedby="ic-tooltip-test-button-right"
+        >
+          Right
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="right-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right-end"
+        target="test-button-right-end"
+      >
+        <button
+          id="test-button-right-end"
+          aria-describedby="ic-tooltip-test-button-right-end"
+        >
+          Right end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Right placements",
+};
+
+export const LeftPlacements = {
+  render: (args) =>
+    html` <div style="margin-left: 400px">
+      <ic-tooltip
+        placement="left-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left-start"
+        target="test-button-left-start"
+      >
+        <button
+          id="test-button-left-start"
+          aria-describedby="ic-tooltip-test-button-left-start"
+        >
+          Left start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="left"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left"
+        target="test-button-left"
+      >
+        <button
+          id="test-button-left"
+          aria-describedby="ic-tooltip-test-button-left"
+        >
+          Left
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="left-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left-end"
+        target="test-button-left-end"
+      >
+        <button
+          id="test-button-left-end"
+          aria-describedby="ic-tooltip-test-button-left-end"
+        >
+          Left end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Left placements",
+};
+
+export const Truncation = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This is a body of text that is truncated to three lines within a tooltip. It has been truncated based on the max-lines property. The number of lines in the text is clamped to the number passed through the max-lines property."
+      target="test-button-truncation"
+      max-lines="3"
+      id="ic-tooltip-test-button-truncation"
+      ><button
+        id="test-button-truncation"
+        aria-describedby="ic-tooltip-test-button-truncation"
+      >
+        Default
+      </button></ic-tooltip
+    >`,
+
+  name: "Truncation",
+  height: "100px",
+};
+
+export const DarkBackground = {
+  render: (args) =>
+    html`<div style="height: 100px;background-color:#333333;">
+      <ic-tooltip
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-dark"
+        target="test-button-dark"
+      >
+        <button
+          id="test-button-dark"
+          aria-describedby="ic-tooltip-test-button-dark"
+        >
+          Default
+        </button>
+      </ic-tooltip>
+    </div>`,
+
+  name: "Dark background",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<div style="margin: 250px">
+      <ic-tooltip
+        label=${args.label}
+        placement=${args.placement}
+        max-lines=${args.maxLines}
+        disable-hover=${args.disableHover}
+        id="ic-tooltip-test-button-default"
+        target="button-id"
+        theme=${args.theme}
+      >
+        <button
+          id="button-id"
+          aria-describedby="ic-tooltip-test-button-default"
+        >
+          Button 1
+        </button>
+      </ic-tooltip>
+    </div> `,
+
+  args: defaultArgs,
+
+  argTypes: {
+    placement: {
+      options: [
+        "bottom",
+        "top-start",
+        "top",
+        "top-end",
+        "right-start",
+        "right",
+        "right-end",
+        "bottom-end",
+        "bottom-start",
+        "left-end",
+        "left",
+        "left-start",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -443,15 +443,42 @@ video {
 
 :host {
   display: block;
-  color: var(--ic-theme-text);
+  color: var(--ic-top-navigation-text);
   width: 100%;
   position: relative;
 
-  --ic-typography-color: currentcolor;
+  --ic-typography-color: var(--ic-top-navigation-text);
+
+  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
+  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);
+}
+
+:host(.dark) {
+  color: var(--ic-color-text-primary-light);
+  --ic-typography-color: var(--ic-color-text-primary-light);
+  --ic-top-navigation-logo: var(--ic-color-icon-neutral);
+  --ic-top-navigation-icon: var(--ic-color-icon-neutral);
+  --ic-top-navigation-theme: var(--ic-color-icon-neutral);
+  --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);
+  --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);
+  --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);
+  --navigation-link-colour: var(--ic-color-text-primary-light);
+}
+
+:host ::slotted(ic-navigation-item) {
+  --navigation-link-colour: var(--ic-top-navigation-text);
+}
+
+:host(.dark) ::slotted(ic-navigation-button) {
+  --ic-button-icon-monochrome: var(--ic-color-text-primary-light);
+}
+
+::slotted(ic-navigation-button) {
+  --ic-button-icon-monochrome: white;
 }
 
 :host .top-navigation {
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-top-navigation-background);
   height: -moz-max-content;
   height: max-content;
 }
@@ -474,17 +501,17 @@ video {
 :host .title-link ::slotted(a),
 :host .title-link:visited ::slotted(a),
 :host .title-link:active ::slotted(a) {
-  color: var(--ic-theme-text);
+  color: var(--ic-top-navigation-icon-and-label);
   text-decoration: none;
   outline: none;
 }
 
 :host .title-link:hover:not(:focus) {
-  background-color: var(--ic-theme-hover);
+  background-color: var(--ic-top-navigation-title-hover);
 }
 
 :host .title-link:active:not(:focus) {
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-top-navigation-title-pressed);
 }
 
 :host .title-link:hover {
@@ -503,7 +530,7 @@ video {
 }
 
 :host .nav-panel-container {
-  border-top: var(--ic-keyline-lighten);
+  border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);
   padding: 0 var(--ic-space-lg);
   margin-left: calc(-1 * var(--section-container-margin));
   margin-right: calc(-1 * var(--section-container-margin));
@@ -511,7 +538,7 @@ video {
 }
 
 :host(.dark) .nav-panel-container {
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
 }
 
 .top-panel-container {
@@ -556,8 +583,9 @@ video {
 
 :host .app-status {
   border-radius: var(--ic-space-md);
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-color-primary-text-light);
+  background-color: var(--ic-top-navigation-status-tag);
+  color: var(--ic-top-navigation-status-tag-text);
+  --ic-typography-color: var(--ic-top-navigation-status-tag-text);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   margin-left: var(--ic-space-md);
   flex: 1 1 0;
@@ -565,14 +593,10 @@ video {
   max-width: fit-content;
 }
 
-:host(.dark) .app-status {
-  background-color: var(--ic-theme-text);
-  color: var(--ic-architectural-white);
-}
-
 :host .app-version {
   border-radius: var(--ic-space-md);
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-top-navigation-status-tag-secondary);
+  color: var(--ic-top-navigation-status-tag);
   padding: var(--ic-space-xxs) var(--ic-space-sm);
   margin-left: var(--ic-space-xs);
   flex: 1 1 0;
@@ -581,13 +605,13 @@ video {
 }
 
 slot[name="app-icon"]::slotted(*) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-top-navigation-logo);
   width: 2em;
   height: 2em;
 }
 
 slot[name="toggle-icon"] svg {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-top-navigation-icon);
 }
 
 .search-menu-container {
@@ -673,7 +697,7 @@ slot[name="toggle-icon"] svg {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
   height: 4rem;
   padding-left: var(--ic-space-md);
   padding-right: var(--ic-space-md);
@@ -718,15 +742,19 @@ slot[name="toggle-icon"] svg {
 
 @media (forced-colors: active) {
   :host .top-navigation {
-    border-bottom: var(--ic-hc-border);
+    border-bottom: var(--ic-border-hc);
   }
 
   .app-status,
   .app-version {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   slot[name="app-icon"]::slotted(*) {
     fill: currentcolor;
   }
+
+  slot[name="toggle-icon"] svg {
+    fill: currentcolor;
+  }
 }

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getThemeForegroundColor, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
+import { IcBrandForegroundEnum, } from "../../utils/types";
+import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getBrandForegroundAppearance, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
  * @slot app-title - Handle routing by nesting a route in the app title.
@@ -77,7 +77,7 @@ export class TopNavigation {
             this.resizeObserver.observe(this.el);
         };
         this.deviceSize = DEVICE_SIZES.XL;
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
         this.hasFullWidthSearchBar = false;
         this.mobileSearchBarVisible = false;
         this.mobileSearchHiddenOnBlur = false;
@@ -90,6 +90,7 @@ export class TopNavigation {
         this.inline = false;
         this.shortAppTitle = "";
         this.status = "";
+        this.theme = "inherit";
         this.version = "";
         this.appTitle = undefined;
     }
@@ -131,7 +132,7 @@ export class TopNavigation {
     searchValueChangeHandler({ detail }) {
         this.searchValue = detail.value;
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.foregroundColor = detail.mode;
     }
     toggleSearchBar() {
@@ -154,7 +155,7 @@ export class TopNavigation {
         document.body.style.overflow = show ? "hidden" : "auto";
     }
     render() {
-        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, } = this;
+        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
         const hasStatus = status !== "";
         const hasVersion = version !== "";
         const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
@@ -177,10 +178,15 @@ export class TopNavigation {
         return (h(Host, { class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
-                [IcThemeForegroundEnum.Dark]: foregroundColor === IcThemeForegroundEnum.Dark,
+                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             } }, h("div", { class: "top-navigation" }, h("ic-section-container", { aligned: contentAligned, "full-height": true }, h("header", { role: "banner" }, h("div", { class: "top-panel-container" }, h("div", { class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ class: "title-link" }, attrs), hasAppIcon && (h("div", { class: "app-icon-container" }, h("slot", { name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon", size: searchButtonSize, "aria-label": mobileSearchButtonTitle, appearance: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", appearance: foregroundColor, variant: "secondary", "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { class: "app-status" }, h("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { class: "app-version" }, h("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { class: "search-menu-container" }, h("div", { class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", theme: foregroundColor == IcBrandForegroundEnum.Light
+                ? IcBrandForegroundEnum.Dark
+                : IcBrandForegroundEnum.Light, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { class: "search-bar-container" }, h("slot", { name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { class: "navigation-tabs" }, h("span", { id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { monochrome: true, appearance: foregroundColor }, h("ul", { class: "navigation-item-list", tabindex: "-1" }, h("slot", { name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { version: version, status: status, class: {
                 ["inline"]: inline,
             } }, hasIconButtons && (h("div", { class: "menu-buttons-slot", slot: "buttons" }, h("slot", { name: "buttons" }))), h("ul", { slot: "navigation" }, h("slot", { name: "navigation" }))))));
     }
@@ -318,6 +324,30 @@ export class TopNavigation {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "version": {
                 "type": "string",
                 "mutable": false,
@@ -448,8 +478,8 @@ export class TopNavigation {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false