@ukic/web-components 2.35.1 → 2.35.2

package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-badge.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/basic/ic-badge.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Badge } from \"../../ic-badge\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Chip } from \"../../../ic-chip/ic-chip\";\nimport { Tab } from \"../../../ic-tab/ic-tab\";\nimport { Card } from \"../../../ic-card/ic-card\";\nimport { NavigationButton } from \"../../../ic-navigation-button/ic-navigation-button\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\n\ndescribe(\"ic-badge\", () => {\n  it(\"should render with text slotted in a button\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with text slotted in a button\"\n    );\n  });\n\n  it(\"should render light variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"light\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render light variant\");\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"error\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render error variant\");\n  });\n\n  it(\"should render success variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"success\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render success variant\");\n  });\n\n  it(\"should render warning variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"warning\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render warning variant\");\n  });\n  it(\"should render info variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"info\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render info variant\");\n  });\n\n  it(\"should render custom variant with custom colour in hex\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in hex\"\n    );\n  });\n\n  it(\"should render custom variant with custom colour in rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"rgb(248,200,220)\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in rgb\"\n    );\n  });\n\n  it(\"should render with max number prop set\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with max number prop set\");\n  });\n\n  it(\"should render with accessible label\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\" accessible-label=\"1 notification found\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with accessible label\");\n  });\n\n  it(\"should render size small\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"small\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size small\");\n  });\n\n  it(\"should render size large\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"large\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size large\");\n  });\n\n  it(\"should render type dot\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"dot\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type dot\");\n  });\n\n  it(\"should render type icon\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"icon\">\n            <svg slot='badge-icon' xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n            <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"/>\n            </svg>\n            </ic-badge></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type icon\");\n  });\n\n  it(\"should render with visible false\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" visible=\"false\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with visible false\");\n  });\n\n  it(\"should render slotted in a chip\", async () => {\n    const page = await newSpecPage({\n      components: [Chip, Badge],\n      html: `<ic-chip label=\"Badge\"><ic-badge slot=\"badge\" text-label=\"1\" position=\"near\"/></ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a chip\");\n  });\n\n  it(\"should render slotted in a tab with aria-label set on badge\", async () => {\n    const page = await newSpecPage({\n      components: [Tab, Badge],\n      html: `<ic-tab>Tab<ic-badge slot=\"badge\" text-label=\"1\" position=\"inline\"/></ic-tab>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a tab\");\n  });\n\n  it(\"should render slotted in a card with aria-label set on badge\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Badge],\n      html: `<ic-card heading=\"Badge\"><ic-badge slot=\"badge\" text-label=\"1\" position=\"near\"/></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a card\");\n  });\n\n  it(\"should render slotted in a navigation button\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Badge],\n      html: `<ic-navigation-button\n      label=\"Button One\"\n      slot=\"buttons\"\n      href=\"https://www.google.com\"\n      target=\"_blank\"\n      title=\"Google 1\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n      <ic-badge\n        text-label=\"1\"\n        slot=\"badge\"\n        position=\"near\"\n        variant=\"light\"\n      ></ic-badge>\n    </ic-navigation-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render slotted in a navigation button\"\n    );\n  });\n\n  it(\"should render slotted in a navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem, Badge],\n      html: `<ic-navigation-item label=\"Navigation\" href=\"/\">\n      <ic-badge\n        text-label=\"1\"\n        slot=\"badge\"\n        variant=\"light\"\n        position=\"far\"\n      ></ic-badge>\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          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\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render slotted in a navigation item\"\n    );\n  });\n\n  it(\"should hide and show the badge using visible prop\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.visible).toBe(true);\n\n    badge.visible = false;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(false);\n\n    badge.visible = true;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(true);\n  });\n\n  //To be removed when we remove show and hide methods\n  it(\"should hide and show the badge using methods\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.visible).toBe(true);\n\n    await badge.hideBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(false);\n\n    await badge.showBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(true);\n  });\n\n  it(\"should set the correct badge colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.setBadgeColour();\n\n    expect(page.rootInstance.customColorRGBA).toEqual({\n      a: 1,\n      b: 220,\n      g: 200,\n      r: 248,\n    });\n  });\n\n  it(\"should set the correct foreground colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.getBadgeForeground();\n\n    expect(page.rootInstance.foregroundColour).toBe(\"dark\");\n  });\n\n  it(\"should set the correct text label when max number is set\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.rootInstance.getTextLabel()).toBe(\"9+\");\n  });\n\n  it(\"should render with id set\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" id=\"badge-1\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with id\");\n  });\n});\n"]}
+{"version":3,"file":"ic-badge.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-badge/test/basic/ic-badge.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Badge } from \"../../ic-badge\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Chip } from \"../../../ic-chip/ic-chip\";\nimport { Tab } from \"../../../ic-tab/ic-tab\";\nimport { Card } from \"../../../ic-card/ic-card\";\nimport { NavigationButton } from \"../../../ic-navigation-button/ic-navigation-button\";\nimport { NavigationItem } from \"../../../ic-navigation-item/ic-navigation-item\";\nimport { TopNavigation } from \"../../../ic-top-navigation/ic-top-navigation\";\n\ndescribe(\"ic-badge\", () => {\n  it(\"should render with text slotted in a button\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with text slotted in a button\"\n    );\n  });\n\n  it(\"should render light variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"light\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render light variant\");\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"error\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render error variant\");\n  });\n\n  it(\"should render success variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"success\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render success variant\");\n  });\n\n  it(\"should render warning variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"warning\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render warning variant\");\n  });\n\n  it(\"should render info variant\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"info\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render info variant\");\n  });\n\n  it(\"should render custom variant with custom colour in hex\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in hex\"\n    );\n  });\n\n  it(\"should render custom variant with custom colour in rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"rgb(248,200,220)\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render custom variant with custom colour in rgb\"\n    );\n  });\n\n  it(\"should render with max number prop set\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with max number prop set\");\n  });\n\n  it(\"should render with accessible label\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\" accessible-label=\"1 notification found\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with accessible label\");\n  });\n\n  it(\"should render size small\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"small\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size small\");\n  });\n\n  it(\"should render size large\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" size=\"large\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render size large\");\n  });\n\n  it(\"should render type dot\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"dot\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type dot\");\n  });\n\n  it(\"should render type icon\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" type=\"icon\">\n            <svg slot='badge-icon' xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\">\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n            <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\"/>\n            </svg>\n            </ic-badge></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render type icon\");\n  });\n\n  it(\"should render with visible false\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" visible=\"false\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with visible false\");\n  });\n\n  it(\"should render slotted in a chip\", async () => {\n    const page = await newSpecPage({\n      components: [Chip, Badge],\n      html: `<ic-chip label=\"Badge\"><ic-badge slot=\"badge\" text-label=\"1\" position=\"near\"/></ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a chip\");\n  });\n\n  it(\"should render slotted in a tab with aria-label set on badge\", async () => {\n    const page = await newSpecPage({\n      components: [Tab, Badge],\n      html: `<ic-tab>Tab<ic-badge slot=\"badge\" text-label=\"1\" position=\"inline\"/></ic-tab>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a tab\");\n  });\n\n  it(\"should render slotted in a card with aria-label set on badge\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Badge],\n      html: `<ic-card heading=\"Badge\"><ic-badge slot=\"badge\" text-label=\"1\" position=\"near\"/></ic-card>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render slotted in a card\");\n  });\n\n  it(\"should render slotted in a navigation button\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Badge],\n      html: `<ic-navigation-button\n      label=\"Button One\"\n      slot=\"buttons\"\n      href=\"https://www.google.com\"\n      target=\"_blank\"\n      title=\"Google 1\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n      <ic-badge\n        text-label=\"1\"\n        slot=\"badge\"\n        position=\"near\"\n        variant=\"light\"\n      ></ic-badge>\n    </ic-navigation-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render slotted in a navigation button\"\n    );\n  });\n\n  it(\"should render slotted in a top navigation\", async () => {\n    const page = await newSpecPage({\n      components: [TopNavigation, NavigationItem, Badge],\n      html: `<ic-top-navigation\n        app-title=\"Application Name\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <ic-search-bar\n          slot=\"search\"\n          placeholder=\"Search\"\n          label=\"Search\"\n        ></ic-search-bar>\n        <ic-navigation-button\n          label=\"Button One\"\n          slot=\"buttons\"\n          href=\"https://www.google.com\"\n          target=\"_blank\"\n          title=\"Google 1\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              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\"\n            />\n          </svg>\n          <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n        </ic-navigation-button>\n        <ic-navigation-button\n          label=\"Button Two\"\n          slot=\"buttons\"\n          href=\"https://www.google.com\"\n          target=\"_blank\"\n          title=\"Google 2\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z\"\n            />\n          </svg>\n          <ic-badge slot=\"badge\" type=\"dot\"></ic-badge>\n        </ic-navigation-button>\n        <ic-navigation-button\n          label=\"Button Three\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render slotted in a top navigation\"\n    );\n  });\n\n  it(\"should render slotted in a navigation item\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationItem, Badge],\n      html: `<ic-navigation-item label=\"Navigation\" href=\"/\">\n      <ic-badge\n        text-label=\"1\"\n        slot=\"badge\"\n        variant=\"light\"\n        position=\"far\"\n      ></ic-badge>\n      <svg\n        slot=\"icon\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          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\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </ic-navigation-item>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render slotted in a navigation item\"\n    );\n  });\n\n  it(\"should hide and show the badge using visible prop\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.visible).toBe(true);\n\n    badge.visible = false;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(false);\n\n    badge.visible = true;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(true);\n  });\n\n  //To be removed when we remove show and hide methods\n  it(\"should hide and show the badge using methods\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"1\"/></ic-button>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.visible).toBe(true);\n\n    await badge.hideBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(false);\n\n    await badge.showBadge();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.visible).toBe(true);\n  });\n\n  it(\"should set the correct badge colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.setBadgeColour();\n\n    expect(page.rootInstance.customColorRGBA).toEqual({\n      a: 1,\n      b: 220,\n      g: 200,\n      r: 248,\n    });\n  });\n\n  it(\"should set the correct foreground colour\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" variant=\"custom\" text-label=\"1\" custom-color=\"#F8C8DC\"/></ic-button>`,\n    });\n\n    await page.rootInstance.getBadgeForeground();\n\n    expect(page.rootInstance.foregroundColour).toBe(\"dark\");\n  });\n\n  it(\"should set the correct text label when max number is set\", async () => {\n    const page = await newSpecPage({\n      components: [Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" text-label=\"100\" max-number=\"9\"/></ic-button>`,\n    });\n\n    expect(page.rootInstance.getTextLabel()).toBe(\"9+\");\n  });\n\n  it(\"should render with id set\", async () => {\n    const page = await newSpecPage({\n      components: [Button, Badge],\n      html: `<ic-button>Button<ic-badge slot=\"badge\" id=\"badge-1\" text-label=\"1\"/></ic-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with id\");\n  });\n\n  it(\"should set the correct variant when navigation menu is opened and closed\", async () => {\n    const page = await newSpecPage({\n      components: [Badge, NavigationButton],\n      html: `<ic-top-navigation\n        app-title=\"Application Name\"\n        status=\"alpha\"\n        version=\"v0.0.7\"\n      >\n        <svg\n          slot=\"app-icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <ic-search-bar\n          slot=\"search\"\n          placeholder=\"Search\"\n          label=\"Search\"\n        ></ic-search-bar>\n        <ic-navigation-button\n          label=\"Button One\"\n          slot=\"buttons\"\n          href=\"https://www.google.com\"\n          target=\"_blank\"\n          title=\"Google 1\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              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\"\n            />\n          </svg>\n          <ic-badge label=\"1\" slot=\"badge\"></ic-badge>\n        </ic-navigation-button>\n        <ic-navigation-button\n          label=\"Button Two\"\n          slot=\"buttons\"\n          href=\"https://www.google.com\"\n          target=\"_blank\"\n          title=\"Google 2\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n            <path\n              d=\"M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z\"\n            />\n          </svg>\n          <ic-badge slot=\"badge\" type=\"dot\"></ic-badge>\n        </ic-navigation-button>\n        <ic-navigation-button\n          label=\"Button Three\"\n          slot=\"buttons\"\n          onclick=\"alert('test')\"\n        >\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\n            />\n          </svg>\n        </ic-navigation-button>\n      </ic-top-navigation>`,\n    });\n\n    const badge = document.querySelector(\"ic-badge\");\n\n    expect(page.rootInstance.mode).toBe(\"navbar\");\n\n    document.dispatchEvent(new CustomEvent(\"icNavigationMenuOpened\"));\n    expect(page.rootInstance.mode).toBe(\"menu\");\n    expect(badge.position).toBe(\"inline\");\n\n    document.dispatchEvent(new CustomEvent(\"icNavigationMenuClosed\"));\n    expect(page.rootInstance.mode).toBe(\"navbar\");\n    expect(badge.position).toBe(\"near\");\n  });\n});\n"]}

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

@@ -455,3 +455,7 @@ video {
   height: 100%;
   min-height: 2.5rem;
 }
+
+:host(.in-side-menu) ::slotted(ic-badge) {
+  margin-left: var(--ic-space-xs);
+}

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

@@ -101,7 +101,7 @@ export 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 is() { return "ic-navigation-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-navigation-button.js","sourceRoot":"","sources":["../../../src/components/ic-navigation-button/ic-navigation-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -235,11 +235,8 @@ export class Tooltip {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "If `true`, the tooltip will not be displayed on click, it will require hover or using the display method."
                 },
                 "attribute": "disable-click",
                 "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,CAAC,EACD,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAOvE,MAAM,OAAO,OAAO;;QAEV,sBAAiB,GAAG,CAAC,YAAY,CAAC,CAAC;QACnC,mBAAc,GAAG,KAAK,CAAC;QAEvB,sBAAiB,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,kBAAa,GAAY,KAAK,CAAC;QAC/B,mBAAc,GAAG,KAAK,CAAC;QAEvB,aAAQ,GAAY,KAAK,CAAC;QAC1B,eAAU,GAAG;YACnB,CAAC,IAAI,CAAC,YAAY,IAAI,YAAY;YAClC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAS;YAC/B,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO;SAC9B,CAAC;QAsGM,wBAAmB,GAAG,CAAC,QAAiB,EAAE,EAAE;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAC1D,IAAI,QAAQ,CAAC;YACb,IAAI,QAAQ,CAAC;YACb,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvB,KAAK,QAAQ;oBACX,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC1D,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,cAAc;oBACjB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;oBACtC,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,YAAY;oBACf,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;oBACxC,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC;oBACvC,MAAM;gBACR,KAAK,KAAK;oBACR,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;oBAC1D,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,WAAW;oBACd,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;oBACtC,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,SAAS;oBACZ,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;oBACxC,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC;oBACvC,MAAM;gBACR,KAAK,MAAM,CAAC;gBACZ,KAAK,YAAY;oBACf,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBACtD,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,UAAU;oBACb,QAAQ,GAAG,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBACtD,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,OAAO,CAAC;gBACb,KAAK,aAAa;oBAChB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;oBACpD,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;gBACR,KAAK,WAAW;oBACd,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;oBACpD,QAAQ,GAAG,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;oBACtD,MAAM;YACV,CAAC;YACD,IAAI,IAAI,CAAC,cAAc,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;gBACxC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACxE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC5B,2BAA2B,EAC3B,GAAG,QAAQ,IAAI,CAChB,CAAC;oBACF,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;gBACxC,CAAC;gBACD,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;oBACpC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;oBACzB,QAAQ,GAAG,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;gBACtD,CAAC;YACH,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,QAAQ,IAAI,CAAC,CAAC;YACzE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,QAAQ,IAAI,CAAC,CAAC;QAC3E,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;gBAE3C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;oBACnC,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU;yBACxC,aAAa,CAAC,QAAQ,CAAC;yBACvB,qBAAqB,EAAE,CAAC;oBAE3B,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;gBACrC,CAAC;gBAED,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,OAAO,kBACtD,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE;wBACT;4BACE,IAAI,EAAE,QAAQ;4BACd,OAAO,EAAE;gCACP,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;6BAChB;yBACF;wBACD;4BACE,IAAI,EAAE,OAAO;4BACb,OAAO,EAAE;gCACP,OAAO,EAAE,IAAI,CAAC,KAAK;6BACpB;yBACF;wBACD;4BACE,IAAI,EAAE,gBAAgB;4BACtB,OAAO,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;yBAC1C;qBACF,IACE,IAAI,CAAC,WAAW,EACnB,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,IAAI,CAAC,gDAAgD,CAAC,CAAC;YACjE,CAAC;QACH,CAAC,CAAC;QAEM,SAAI,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YAC1C,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;gBACtC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAChC,CAAC;QACH,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;oBAChD,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACnD,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,MAAwB,EAAE,EAAE;YAC1D,MAAM,MAAM,GACV,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,qBAAqB,CAAC;YAEhE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBAChC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACzB,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACvC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBAC/C,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBAC/B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,CAAC,CAAC;4BAhQ+B,KAAK;4BAKL,KAAK;;yBAUqB,QAAQ;sBAKxC,KAAK;;;2BAYS,EAAE;;IAE3C;;;OAGG;IAEH,KAAK,CAAC,sBAAsB,CAA6B,KAAQ;QAC/D,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC/C,IAAI,CAAC,cAAc;YACjB,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,CAAC,eAAe,CAAC,MAAK,MAAM,CAAC;QAE5D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC;QAEzC,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,SAAS,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CACnD,uCAAuC,CACxC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC;YACf,YAAY,CAAC,YAAY,CACvB,OAAO,EACP,2BAA2B,IAAI,CAAC,QAAQ,EAAE,CAC3C,CAAC;IACN,CAAC;IACD;;;;OAIG;IAEH,KAAK,CAAC,cAAc,CAAC,IAAa,EAAE,cAAwB;QAC1D,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,gBAAgB;QACpB,OAAO,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;IACjE,CAAC;IAsKD,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACzC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE;YACjC,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC,EAClD,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,sBAAsB,iBACf,GAAG,MAAM,EAAE;gBAExB,qBAAe,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAC,SAAS,IACjD,KAAK,CACQ;gBAChB,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAoB,CAAC,EAChD,KAAK,EAAC,kBAAkB,GACnB,CACH;YACN,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * @internal If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tooltip.js","sourceRoot":"","sources":["../../../src/components/ic-tooltip/ic-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Method,\n  State,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-tooltip\",\n  styleUrl: \"ic-tooltip.css\",\n  shadow: true,\n})\nexport class Tooltip {\n  private arrow: HTMLDivElement;\n  private delayedHideEvents = [\"mouseleave\"];\n  private dialogOverflow = false;\n  private icDialogEl: HTMLIcDialogElement;\n  private instantHideEvents = [\"focusout\"];\n  private mouseOverTool: boolean = false;\n  private persistTooltip = false;\n  private popperInstance: Instance;\n  private onDialog: boolean = false;\n  private showEvents = [\n    !this.disableHover && \"mouseenter\",\n    !this.disableHover && \"focusin\",\n    !this.disableClick && \"click\",\n  ];\n  private toolTip: HTMLDivElement;\n\n  @Element() el: HTMLIcTooltipElement;\n\n  /**\n   * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n   */\n  @Prop() disableClick?: boolean = false;\n\n  /**\n   * If `true`, the tooltip will not be displayed on hover, it will require a click.\n   */\n  @Prop() disableHover?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The position of the tooltip in relation to the parent element.\n   */\n  @Prop({ mutable: true }) placement?: IcTooltipPlacements = \"bottom\";\n\n  /**\n   * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n   */\n  @Prop() silent?: boolean = false;\n\n  /**\n   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n   */\n  @Prop({ reflect: true }) target?: string;\n\n  /**\n   * The text to display on the tooltip.\n   */\n  @Prop() label!: string;\n\n  @State() popperProps: Partial<Options> = {};\n\n  /**\n   * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n   * @param props object - createPopper props set externally\n   */\n  @Method()\n  async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n    this.popperProps = props;\n  }\n\n  disconnectedCallback(): void {\n    this.manageEventListeners(\"remove\");\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.manageEventListeners(\"add\");\n\n    this.icDialogEl = this.el.closest(\"ic-dialog\");\n    this.dialogOverflow =\n      this.icDialogEl?.getAttribute(\"data-overflow\") === \"true\";\n\n    this.onDialog = this.icDialogEl !== null;\n\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tooltip\"\n    );\n  }\n\n  componentDidRender(): void {\n    const typographyEl = this.el.shadowRoot.querySelector(\n      \".ic-tooltip-container > ic-typography\"\n    );\n    this.maxLines > 0 &&\n      typographyEl.setAttribute(\n        \"style\",\n        `--truncation-max-lines: ${this.maxLines}`\n      );\n  }\n  /**\n   * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n   * @param show Whether to show or hide the tooltip\n   * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n   */\n  @Method()\n  async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n    this.persistTooltip = persistTooltip;\n    show ? this.show() : this.hide();\n  }\n\n  /**\n   * @internal Method to return if tooltip is currently visible.\n   */\n  @Method()\n  async isTooltipVisible(): Promise<boolean> {\n    return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n  }\n\n  private getTooltipTranslate = (dialogEl: DOMRect) => {\n    const child = this.el.children[0].getBoundingClientRect();\n    let tooltipX;\n    let tooltipY;\n    switch (this.placement) {\n      case \"bottom\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"bottom-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.bottom - dialogEl.top;\n        break;\n      case \"top\":\n        tooltipX = child.left - dialogEl.left - 0.5 * child.width;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-start\":\n        tooltipX = child.left - dialogEl.left;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"top-end\":\n        tooltipX = child.right - dialogEl.right;\n        tooltipY = child.top - dialogEl.bottom;\n        break;\n      case \"left\":\n      case \"left-start\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"left-end\":\n        tooltipX = child.right - dialogEl.right - child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n      case \"right\":\n      case \"right-start\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.bottom - dialogEl.top - child.height;\n        break;\n      case \"right-end\":\n        tooltipX = child.left - dialogEl.left + child.width;\n        tooltipY = child.top - dialogEl.bottom + child.height;\n        break;\n    }\n    if (this.dialogOverflow && tooltipX < 0) {\n      if (this.placement.includes(\"top\") || this.placement.includes(\"bottom\")) {\n        this.toolTip.style.setProperty(\n          \"--tooltip-arrow-translate\",\n          `${tooltipX}px`\n        );\n        tooltipX = child.left - dialogEl.left;\n      }\n      if (this.placement.includes(\"left\")) {\n        this.placement = \"right\";\n        tooltipX = child.left - dialogEl.left + child.width;\n      }\n    }\n\n    this.toolTip.style.setProperty(\"--tooltip-translate-x\", `${tooltipX}px`);\n    this.toolTip.style.setProperty(\"--tooltip-translate-y\", `${tooltipY}px`);\n  };\n\n  private show = () => {\n    if (this.label) {\n      this.toolTip.setAttribute(\"data-show\", \"\");\n\n      if (this.onDialog) {\n        this.el.classList.add(\"on-dialog\");\n        const dialogEl = this.icDialogEl.shadowRoot\n          .querySelector(\"dialog\")\n          .getBoundingClientRect();\n\n        this.getTooltipTranslate(dialogEl);\n      }\n\n      this.popperInstance = createPopper(this.el, this.toolTip, {\n        placement: this.placement,\n        modifiers: [\n          {\n            name: \"offset\",\n            options: {\n              offset: [0, 10],\n            },\n          },\n          {\n            name: \"arrow\",\n            options: {\n              element: this.arrow,\n            },\n          },\n          {\n            name: \"eventListeners\",\n            options: { scroll: false, resize: false },\n          },\n        ],\n        ...this.popperProps,\n      });\n    } else {\n      console.warn(`Tooltip can't display without prop 'label' set`);\n    }\n  };\n\n  private hide = () => {\n    this.toolTip.removeAttribute(\"data-show\");\n    this.persistTooltip = false;\n    if (this.popperInstance !== undefined) {\n      this.popperInstance.destroy();\n    }\n  };\n\n  private checkCloseTooltip = () => {\n    setTimeout(() => {\n      if (!this.mouseOverTool && !this.persistTooltip) {\n        this.hide();\n      }\n    }, 100);\n  };\n\n  private mouseEnterTooltip = () => {\n    this.mouseOverTool = true;\n  };\n\n  private mouseLeaveTooltip = () => {\n    this.mouseOverTool = false;\n    this.checkCloseTooltip();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"Escape\" && !this.persistTooltip) {\n      this.hide();\n    }\n  };\n\n  private manageEventListeners = (action: \"add\" | \"remove\") => {\n    const method =\n      action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n    this.showEvents.forEach((event) => {\n      this.el[method](event, this.show);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseEnterTooltip);\n      }\n    });\n\n    if (!this.persistTooltip) {\n      this.instantHideEvents.forEach((event) => {\n        this.el[method](event, this.hide);\n      });\n    }\n\n    this.delayedHideEvents.forEach((event) => {\n      this.el[method](event, this.checkCloseTooltip);\n      if (this.toolTip !== undefined) {\n        this.toolTip[method](event, this.mouseLeaveTooltip);\n      }\n    });\n\n    document[method](\"keydown\", this.handleKeyDown);\n  };\n\n  render() {\n    const { label, maxLines, silent } = this;\n    return (\n      <Host class={{ \"ic-tooltip\": true }}>\n        <div\n          ref={(el) => (this.toolTip = el as HTMLDivElement)}\n          role=\"tooltip\"\n          class=\"ic-tooltip-container\"\n          aria-hidden={`${silent}`}\n        >\n          <ic-typography maxLines={maxLines} variant=\"caption\">\n            {label}\n          </ic-typography>\n          <div\n            ref={(el) => (this.arrow = el as HTMLDivElement)}\n            class=\"ic-tooltip-arrow\"\n          ></div>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -194,8 +194,8 @@ export const WithIcons = {
         <ic-badge
           text-label="1"
           slot="badge"
-          position="near"
-          variant="light"
+          custom-color="#d4351c"
+          variant="custom"
         ></ic-badge>
       </ic-navigation-button>
       <ic-navigation-button
@@ -220,8 +220,8 @@ export const WithIcons = {
         </svg>
         <ic-badge
           slot="badge"
-          position="near"
-          variant="light"
+          custom-color="#d4351c"
+          variant="custom"
           type="dot"
         ></ic-badge>
       </ic-navigation-button>
@@ -956,8 +956,8 @@ export const Playground = {
         <ic-badge
           text-label="1"
           slot="badge"
-          position="near"
-          variant="light"
+          custom-color="#d4351c"
+          variant="custom"
         ></ic-badge>
       </ic-navigation-button>
       <ic-navigation-button
@@ -982,8 +982,8 @@ export const Playground = {
         </svg>
         <ic-badge
           slot="badge"
-          position="near"
-          variant="light"
+          custom-color="#d4351c"
+          variant="custom"
           type="dot"
         ></ic-badge>
       </ic-navigation-button>

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; }

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

@@ -1 +1 @@
-{"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && variant === \"icon\" && (\n            <slot name=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  margin-right: var(--ic-space-xs);\n  list-style: none;\n}\n\n:host(.in-side-menu) {\n  margin-right: 0;\n}\n\n:host::part(button) {\n  height: 100%;\n  min-height: 2.5rem;\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n  margin-left: var(--ic-space-xs);\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  State,\n  h,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport {\n  getThemeForegroundColor,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/**\n * @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n */\n\n@Component({\n  tag: \"ic-navigation-button\",\n  styleUrl: \"ic-navigation-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class NavigationButton {\n  private buttonEl: HTMLIcButtonElement;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcNavigationButtonElement;\n\n  @State() initialAppearance = getThemeForegroundColor();\n  /**\n   * The display mode.\n   */\n  @State() mode: IcNavButtonModes = \"navbar\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * The label info to display.\n   */\n  @Prop() label!: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Navigation Button\"\n    );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    iconEl !== null && iconEl.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.mode = \"menu\";\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.mode = \"navbar\";\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.initialAppearance = theme.mode;\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.buttonEl) {\n      this.buttonEl.focus();\n    }\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (MUTABLE_ATTRIBUTES.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { href, target, rel, download, referrerpolicy } = this;\n\n    let label = \"\";\n    let className = \"\";\n    let variant: \"icon\" | \"tertiary\" = \"icon\";\n    let appearance: IcThemeForeground | IcThemeForegroundEnum.Default =\n      this.initialAppearance;\n    let size: \"default\" | \"large\" = \"large\";\n    let fullWidth = false;\n    let disableTooltip = false;\n\n    if (this.mode === \"menu\") {\n      label = this.label;\n      variant = \"tertiary\";\n      appearance = IcThemeForegroundEnum.Default;\n      size = \"default\";\n      fullWidth = true;\n      className = \"popout-menu-button\";\n      disableTooltip = true;\n    }\n\n    const buttonProps = {\n      variant,\n      appearance,\n      size,\n      href,\n      target,\n      rel,\n      download,\n      referrerpolicy,\n      fullWidth,\n      disableTooltip,\n    };\n\n    return (\n      <Host class={{ [\"in-side-menu\"]: this.mode === \"menu\" }}>\n        <ic-button\n          class={className}\n          aria-label={variant == \"icon\" ? this.label : null}\n          ref={(el) => (this.buttonEl = el)}\n          {...buttonProps}\n          {...this.inheritedAttributes}\n        >\n          {label}\n          <slot slot=\"left-icon\" name=\"icon\"></slot>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}