@ukic/web-components 2.35.0 → 2.35.2

package/dist/collection/patterns/z-index.stories.js

@@ -0,0 +1,474 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Patterns/Component z-index",
+};
+
+export const ComponentZIndex = {
+  render: () => html`
+    <style>
+      ic-toast {
+        --bottom-position: 50px;
+      }
+    </style>
+    <div style="display:flex;">
+      <ic-side-navigation
+        app-title="Application Name"
+        version="v0.0.7"
+        status="BETA"
+      >
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+        <ic-navigation-item slot="primary-navigation" href="/" label="Home">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-item
+          slot="primary-navigation"
+          href="/"
+          label="Search"
+          selected="true"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-divider slot="primary-navigation"></ic-divider>
+        <ic-navigation-item slot="primary-navigation" href="/" label="Trends">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-group
+          slot="primary-navigation"
+          label="Second navigation group"
+          expandable="true"
+        >
+          <ic-navigation-item label="Different navigation" href="/">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+          <ic-navigation-item label="Navigation" href="/">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 8C23 9.1 22.1 10 21 10C20.82 10 20.65 9.98 20.49 9.93L16.93 13.48C16.98 13.64 17 13.82 17 14C17 15.1 16.1 16 15 16C13.9 16 13 15.1 13 14C13 13.82 13.02 13.64 13.07 13.48L10.52 10.93C10.36 10.98 10.18 11 10 11C9.82 11 9.64 10.98 9.48 10.93L4.93 15.49C4.98 15.65 5 15.82 5 16C5 17.1 4.1 18 3 18C1.9 18 1 17.1 1 16C1 14.9 1.9 14 3 14C3.18 14 3.35 14.02 3.51 14.07L8.07 9.52C8.02 9.36 8 9.18 8 9C8 7.9 8.9 7 10 7C11.1 7 12 7.9 12 9C12 9.18 11.98 9.36 11.93 9.52L14.48 12.07C14.64 12.02 14.82 12 15 12C15.18 12 15.36 12.02 15.52 12.07L19.07 8.51C19.02 8.35 19 8.18 19 8C19 6.9 19.9 6 21 6C22.1 6 23 6.9 23 8Z"
+                fill="currentColor"
+              />
+            </svg>
+          </ic-navigation-item>
+        </ic-navigation-group>
+        <ic-navigation-item
+          slot="primary-navigation"
+          href="/"
+          label="This is a very very very long label for the navigation item"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+        <ic-navigation-item
+          slot="secondary-navigation"
+          href="/"
+          label="Settings"
+        >
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-navigation-item>
+      </ic-side-navigation>
+      <div
+        class="content-wrapper"
+        style="display:flex; flex-direction: column; flex-grow: 1;"
+      >
+        <main>
+          <ic-top-navigation
+            app-title="Application Name"
+            status="beta"
+            version="v0.0.7"
+          >
+            <svg
+              slot="app-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+            <ic-search-bar
+              slot="search"
+              placeholder="Search"
+              label="Search"
+              id="top-nav-search-bar"
+            ></ic-search-bar>
+            <ic-navigation-button
+              label="button1"
+              slot="buttons"
+              onclick="alert('test')"
+            >
+              <svg
+                slot="icon"
+                xmlns="http://www.w3.org/2000/svg"
+                height="24px"
+                viewBox="0 0 24 24"
+                width="24px"
+                fill="#000000"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+                />
+              </svg>
+            </ic-navigation-button>
+            <ic-navigation-group
+              slot="navigation"
+              label="Navigation group"
+              expandable="true"
+            >
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+                selected="true"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+            </ic-navigation-group>
+            <ic-navigation-group
+              slot="navigation"
+              label="Second navigation group"
+              expandable="true"
+            >
+              <ic-navigation-item
+                label="Different navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+              <ic-navigation-item
+                label="Navigation"
+                href="/"
+              ></ic-navigation-item>
+            </ic-navigation-group>
+          </ic-top-navigation>
+          <span id="main"></span>
+          <ic-page-header
+            heading="Page header"
+            subheading="This is a page header component with additional functionality and this is the text."
+            aligned="full-width"
+            sticky
+          >
+            <ic-status-tag
+              slot="heading-adornment"
+              label="Beta"
+            ></ic-status-tag>
+            <ic-search-bar
+              id="page-header-search-bar"
+              characters-until-suggestion="1"
+              slot="input"
+              label="What is your favourite coffee?"
+            ></ic-search-bar>
+          </ic-page-header>
+          <ic-section-container id="top-target">
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+              vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante
+              quis, tempor interdum libero. In dictum sodales velit, eu egestas
+              arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci
+              sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna
+              interdum risus, vel fringilla libero ex eu dui. Suspendisse
+              ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae
+              congue ligula rutrum id.</ic-typography
+            >
+            <ic-button onclick="showToast()">Display toast</ic-button>
+            <ic-typography
+              >Etiam in suscipit metus. Duis semper, sapien a molestie semper,
+              ex nibh porttitor tellus, vel molestie justo odio vel purus.
+              Curabitur porttitor, tortor sed semper sollicitudin, odio odio
+              congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies
+              commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt
+              ullamcorper sit amet in metus. Aenean facilisis placerat dictum.
+              Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor
+              lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam
+              non lorem ante.</ic-typography
+            >
+            <ic-typography
+              >Donec aliquam eget mauris condimentum cursus. Nullam tempus a
+              urna in commodo. Proin mauris augue, viverra id finibus id,
+              vulputate in ante. Aliquam volutpat hendrerit tellus vitae
+              tristique. Donec pellentesque enim arcu, at feugiat mauris
+              venenatis vitae. Sed iaculis ut elit et ultrices. Donec diam eros,
+              iaculis ac est nec, tempus feugiat nisl. Suspendisse eget interdum
+              lorem. Phasellus pretium urna id elit pharetra
+              hendrerit.</ic-typography
+            >
+            <ic-typography
+              >Mauris blandit, mi ut posuere dapibus, est ante porttitor sem,
+              quis pretium velit ante nec felis. Vivamus efficitur scelerisque
+              dapibus. Nunc lacinia finibus laoreet. Praesent commodo augue
+              orci, congue rutrum velit malesuada gravida. Nunc magna mauris,
+              ornare nec nisl vel, faucibus euismod orci. Proin in augue vitae
+              nunc gravida consectetur. Pellentesque id malesuada ex, sit amet
+              imperdiet est. Duis erat nibh, lacinia vitae faucibus non, aliquam
+              in dolor. Nam interdum felis vitae feugiat posuere. Cras volutpat
+              molestie ipsum, sed auctor quam volutpat vitae. Vivamus lobortis
+              scelerisque libero vel scelerisque.</ic-typography
+            >
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+              eget orci condimentum, tempus tortor posuere, lacinia ex.
+              Curabitur bibendum suscipit turpis vitae mollis. Ut laoreet orci a
+              risus facilisis porta. Orci varius natoque penatibus et magnis dis
+              parturient montes, nascetur ridiculus mus. Curabitur a porttitor
+              neque, ac dignissim velit. Morbi quis malesuada massa, vitae
+              sodales tellus. Aenean laoreet mattis lobortis. In mauris erat,
+              tincidunt in placerat sed, pretium ac tortor. Morbi blandit lacus
+              a leo vehicula aliquet.</ic-typography
+            >
+            <ic-typography
+              >Pellentesque aliquam risus vel eros maximus, at pellentesque mi
+              pretium. Etiam nec velit at orci varius porttitor. Aliquam
+              facilisis, elit non cursus fringilla, metus metus malesuada lacus,
+              at blandit nibh augue aliquet orci. Duis aliquam, est eget sodales
+              ullamcorper, eros turpis euismod nulla, sed sollicitudin diam
+              massa semper purus. Vivamus vel turpis ipsum. Interdum et
+              malesuada fames ac ante ipsum primis in faucibus. Morbi euismod
+              turpis dapibus quam fermentum condimentum. Mauris ex orci,
+              consequat quis tempor eu, finibus vitae eros. Ut eu erat eu ipsum
+              pulvinar cursus vel at dui. Etiam tincidunt quam porta nulla
+              suscipit vestibulum. Sed iaculis enim leo, et aliquam justo
+              feugiat in. Vivamus in ornare nulla, at tempor massa. Sed et
+              aliquam nisi.</ic-typography
+            >
+            <ic-typography
+              >Mauris tempus accumsan libero non tincidunt. Curabitur et leo
+              orci. Suspendisse molestie posuere leo vitae posuere. Cras lacinia
+              urna non erat gravida sagittis. Quisque dapibus arcu nec sem
+              pharetra convallis. Nullam sed arcu mollis, posuere elit at,
+              condimentum ligula. Nullam maximus nulla quam, ut euismod est
+              feugiat at. Quisque ut venenatis ex, in facilisis sapien.
+              Pellentesque in orci vitae metus iaculis venenatis. Nunc porttitor
+              tellus arcu, in posuere quam vulputate nec. Aenean in venenatis
+              ligula, non mollis quam. Suspendisse nec enim vel massa finibus
+              pretium et a urna. Etiam suscipit semper est, id efficitur diam
+              sollicitudin nec. Nullam nibh sapien, condimentum ut laoreet et,
+              euismod ac mi. Vestibulum tristique odio non risus ullamcorper, et
+              aliquam turpis varius. Nunc metus ex, tempus a augue sit amet,
+              interdum vulputate libero.</ic-typography
+            >
+            <ic-typography
+              >Aenean convallis libero id magna congue pellentesque. Nulla
+              iaculis interdum porta. Aenean laoreet scelerisque nulla vel
+              molestie. Class aptent taciti sociosqu ad litora torquent per
+              conubia nostra, per inceptos himenaeos. Integer sollicitudin in
+              felis vitae rhoncus. Sed eu elementum massa. Cras ut accumsan
+              risus. Donec nec augue justo. Aenean sagittis luctus leo egestas
+              consectetur. Sed sit amet nisl quis felis volutpat facilisis ac
+              vitae tellus. Curabitur pharetra commodo consequat. Aliquam
+              consequat ipsum lacus, sed faucibus sapien mollis
+              vel.</ic-typography
+            >
+            <ic-toast-region>
+              <ic-toast id="toast1" heading="Your coffee is ready"></ic-toast>
+            </ic-toast-region>
+          </ic-section-container>
+        </main>
+        <ic-back-to-top target="main"></ic-back-to-top>
+        <ic-footer
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback,
+              please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+              background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+          >
+            Logo
+          </div>
+        </ic-footer>
+      </div>
+    </div>
+    <ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>
+    <script>
+      const options = [
+        { label: "Espresso", value: "espresso" },
+        { label: "Double Espresso", value: "doubleespresso" },
+        { label: "Flat White", value: "flatwhite" },
+        { label: "Cappuccino", value: "cappuccino" },
+        { label: "Americano", value: "americano" },
+        { label: "Ameno", value: "ameno" },
+        { label: "Aicano", value: "acano" },
+        { label: "Mocha", value: "mocha" },
+      ];
+      document.querySelector("#page-header-search-bar").options = options;
+      document.querySelector("#top-nav-search-bar").options = options;
+      var toastRegion = document.querySelector("ic-toast-region");
+      function showToast() {
+        var x = document.getElementById("toast1");
+        toastRegion.setVisible(x);
+      }
+    </script>
+  `,
+
+  name: "Component z-index",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};

package/dist/components/ic-badge.js

@@ -4,6 +4,8 @@ import { d as defineCustomElement$2 } from './ic-typography2.js';
 
 const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
 
+const NAVIGATION_BUTTON = "IC-NAVIGATION-BUTTON";
+const TOP_NAVIGATION = "IC-TOP-NAVIGATION";
 const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
     constructor() {
         super();
@@ -63,6 +65,18 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
                 }
             }
         };
+        this.setPositionInTopNavigation = () => {
+            const parentTopNavEl = this.el.parentElement.parentElement;
+            parentTopNavEl.classList.contains("mobile-mode")
+                ? (this.position = "inline")
+                : (this.position = "near");
+        };
+        this.isInTopNav = () => {
+            const parentEl = this.el.parentElement;
+            const grandparentEl = parentEl.parentElement;
+            return (parentEl.tagName === NAVIGATION_BUTTON &&
+                grandparentEl.tagName === TOP_NAVIGATION);
+        };
         this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
@@ -99,6 +113,15 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.type === "text" &&
             onComponentRequiredPropUndefined([{ prop: this.textLabel, propName: "text-label" }], "Badge");
     }
+    componentWillRender() {
+        this.isInTopNav() && this.setPositionInTopNavigation();
+    }
+    navBarMenuOpenHandler() {
+        this.isInTopNav() && (this.position = "inline");
+    }
+    navBarMenuCloseHandler() {
+        this.isInTopNav() && (this.position = "near");
+    }
     /**
      * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.
      */
@@ -135,7 +158,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         "accessibleLabel": [1, "accessible-label"],
         "customColor": [1, "custom-color"],
         "maxNumber": [2, "max-number"],
-        "position": [1],
+        "position": [1025],
         "size": [1],
         "textLabel": [1, "text-label"],
         "type": [1],
@@ -143,7 +166,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         "visible": [1028],
         "showBadge": [64],
         "hideBadge": [64]
-    }, undefined, {
+    }, [[4, "icNavigationMenuOpened", "navBarMenuOpenHandler"], [4, "icNavigationMenuClosed", "navBarMenuCloseHandler"]], {
         "accessibleLabel": ["accessibleLabelHandler"],
         "customColor": ["customColorHandler"],
         "variant": ["variantHandler"],

package/dist/components/ic-badge.js.map

@@ -1 +1 @@
-{"file":"ic-badge.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host(.neutral) {\n  background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n  background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n  background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n  background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n  background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n  color: white;\n}\n\n:host(.text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n  position: static;\n}\n\n:host(.hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getCssProperty,\n  getThemeForegroundColor,\n  hexToRgba,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop() position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    this.getBadgeForeground();\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.textLabel, propName: \"text-label\" }],\n        \"Badge\"\n      );\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      this.customColorRGBA = colorRGBA;\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n  };\n\n  private getBadgeRGB = () => {\n    switch (this.variant) {\n      case \"custom\":\n        return this.customColorRGBA;\n      case \"error\":\n      case \"success\":\n      case \"warning\":\n      case \"info\": {\n        return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n      }\n      case \"neutral\":\n      case \"light\":\n        return hexToRgba(\n          getCssProperty(\n            `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n          )\n        );\n    }\n  };\n\n  private getBadgeForeground = () => {\n    const { r, g, b } = this.getBadgeRGB();\n    this.foregroundColour = getThemeForegroundColor(\n      (r * 299 + g * 587 + b * 114) / 1000\n    );\n  };\n\n  private getTextLabel = () =>\n    this.maxNumber && Number(this.textLabel) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.textLabel;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.textLabel || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getTextLabel,\n      position,\n      size,\n      textLabel,\n      type,\n      variant,\n      visible,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [`${visible ? \"show\" : \"hide\"}`]: true,\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && textLabel && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getTextLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-badge.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host(.neutral) {\n  background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n  background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n  background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n  background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n  background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n  background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n  color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n  color: white;\n}\n\n:host(.text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n  position: static;\n}\n\n:host(.hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcColorRGBA,\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getCssProperty,\n  getThemeForegroundColor,\n  hexToRgba,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n  rgbaStrToObj,\n} from \"../../utils/helpers\";\n\nconst NAVIGATION_BUTTON = \"IC-NAVIGATION-BUTTON\";\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private customColorRGBA: IcColorRGBA;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and textLabel is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() textLabel?: string;\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    this.getBadgeForeground();\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    this.getBadgeForeground();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.textLabel, propName: \"text-label\" }],\n        \"Badge\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = \"near\");\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async showBadge(): Promise<void> {\n    this.visible = true;\n  }\n\n  /**\n   * @deprecated This method should not be used anymore. Use visible prop to set badge visibility.\n   */\n  @Method()\n  async hideBadge(): Promise<void> {\n    this.visible = false;\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      this.customColorRGBA = colorRGBA;\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n    }\n  };\n\n  private getBadgeRGB = () => {\n    switch (this.variant) {\n      case \"custom\":\n        return this.customColorRGBA;\n      case \"error\":\n      case \"success\":\n      case \"warning\":\n      case \"info\": {\n        return rgbaStrToObj(getCssProperty(`--ic-status-${this.variant}`));\n      }\n      case \"neutral\":\n      case \"light\":\n        return hexToRgba(\n          getCssProperty(\n            `--ic-architectural-${this.variant === \"neutral\" ? 500 : 40}`\n          )\n        );\n    }\n  };\n\n  private getBadgeForeground = () => {\n    const { r, g, b } = this.getBadgeRGB();\n    this.foregroundColour = getThemeForegroundColor(\n      (r * 299 + g * 587 + b * 114) / 1000\n    );\n  };\n\n  private getTextLabel = () =>\n    this.maxNumber && Number(this.textLabel) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.textLabel;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.textLabel || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    const parentTopNavEl = this.el.parentElement.parentElement;\n    parentTopNavEl.classList.contains(\"mobile-mode\")\n      ? (this.position = \"inline\")\n      : (this.position = \"near\");\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    const grandparentEl = parentEl.parentElement;\n    return (\n      parentEl.tagName === NAVIGATION_BUTTON &&\n      grandparentEl.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getTextLabel,\n      position,\n      size,\n      textLabel,\n      type,\n      variant,\n      visible,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`${position}`]: true,\n          [`${size}`]: true,\n          [`${variant}`]: true,\n          [`${type}`]: true,\n          [`foreground-${foregroundColour}`]: foregroundColour !== null,\n          [`${visible ? \"show\" : \"hide\"}`]: true,\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && textLabel && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getTextLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-navigation-button.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icNavigationButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}:host::part(button){height:100%;min-height:2.5rem}";
+const icNavigationButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}:host::part(button){height:100%;min-height:2.5rem}:host(.in-side-menu) ::slotted(ic-badge){margin-left:var(--ic-space-xs)}";
 
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
 const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton extends HTMLElement {
@@ -106,7 +106,7 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
             fullWidth,
             disableTooltip,
         };
-        return (h(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && variant === "icon" && (h("slot", { name: "badge" })))));
+        return (h(Host, { class: { ["in-side-menu"]: this.mode === "menu" } }, h("ic-button", Object.assign({ class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes), label, h("slot", { slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }