@ukic/web-components 3.7.0 → 3.9.0

package/dist/collection/components/ic-action-chip/ic-action-chip.stories.js

@@ -0,0 +1,386 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Action chip",
+  component: "ic-action-chip",
+};
+
+export const Sizes = {
+  render: () => html`<ic-action-chip
+      label="Small"
+      size="small"
+    ></ic-action-chip>
+    <ic-action-chip label="Medium"></ic-action-chip>
+    <ic-action-chip label="Large" size="large"></ic-action-chip>`,
+
+  name: "Sizes",
+};
+
+export const Outlined = {
+  render: () =>
+    html`<ic-action-chip label="Outlined" variant="outlined"></ic-action-chip
+      ><ic-action-chip
+        label="Non transparent"
+        variant="outlined"
+        transparent-background="false"
+      ></ic-action-chip>`,
+
+  name: "Outlined",
+};
+
+export const Disabled = {
+  render: () => html`<ic-action-chip
+      label="Default"
+      disabled="true"
+    ></ic-action-chip>
+    <ic-action-chip label="Outlined" variant="outlined" disabled="true">
+    </ic-action-chip>
+    <ic-action-chip
+      label="Non transparent"
+      variant="outlined"
+      transparent-background="false"
+      disabled="true"
+    >
+    </ic-action-chip>`,
+
+  name: "Disabled",
+};
+
+export const Icon = {
+  render: () => html` <ic-action-chip label="With icon">
+    <svg
+      slot="icon"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="account"
+    >
+      <path
+        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+      />
+    </svg>
+  </ic-action-chip>`,
+
+  name: "Icon",
+};
+
+export const Badge = {
+  render: () => html` <ic-action-chip label="With badge" variant="outlined"
+    ><ic-badge
+      label="1"
+      slot="badge"
+      position="near"
+      variant="success"
+    ></ic-badge>
+  </ic-action-chip>`,
+
+  name: "Badge",
+};
+
+export const Link = {
+  render: () =>
+    html`<ic-action-chip
+      label="Link"
+      href="#"
+      target="_blank"
+    ></ic-action-chip>`,
+
+  name: "Link",
+};
+
+export const ThemeMonochrome = {
+  render: () => html`<div style="display: flex; flex-direction: column;">
+    <div style="background-color: white; padding: 8px">
+      <ic-theme theme="light">
+        <ic-typography variant="body">Light</ic-typography>
+        <ic-action-chip label="Default">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip label="Outlined" variant="outlined">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Non transparent"
+          variant="outlined"
+          transparent-background="false"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip label="Monochrome" monochrome="true">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Outlined monochrome"
+          variant="outlined"
+          monochrome="true"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Non transparent monochrome"
+          variant="outlined"
+          transparent-background="false"
+          monochrome="true"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+      </ic-theme>
+    </div>
+    <div style="background-color: black; padding: 8px">
+      <ic-theme theme="dark">
+        <ic-typography variant="body">Dark</ic-typography>
+        <ic-action-chip label="Default">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip label="Outlined" variant="outlined">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Non transparent"
+          variant="outlined"
+          transparent-background="false"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip label="Monochrome" monochrome="true">
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Outlined monochrome"
+          variant="outlined"
+          monochrome="true"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+        <ic-action-chip
+          label="Non transparent monochrome"
+          variant="outlined"
+          transparent-background="false"
+          monochrome="true"
+        >
+          <svg
+            slot="icon"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="account"
+          >
+            <path
+              d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+            />
+          </svg>
+        </ic-action-chip>
+      </ic-theme>
+    </div>
+  </div>`,
+
+  name: "Theme and monochrome",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) => html`<ic-action-chip
+    label=${args.label}
+    disabled=${args.disabled}
+    href=${args.href}
+    monochrome=${args.monochrome}
+    size=${args.size}
+    target=${args.target}
+    theme=${args.theme}
+    transparent-background=${args.transparentBackground}
+    variant=${args.variant}
+  >
+    <svg
+      slot="icon"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="account"
+    >
+      <path
+        d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z"
+      />
+    </svg>
+    <ic-badge label="1" slot="badge" variant="success"></ic-badge>
+  </ic-action-chip>`,
+
+  name: "Playground",
+
+  args: {
+    label: "Label",
+    disabled: false,
+    href: "",
+    monochrome: false,
+    size: "medium",
+    target: "",
+    theme: "inherit",
+    transparentBackground: true,
+    variant: "filled",
+  },
+
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    variant: {
+      options: ["filled", "outlined"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};

package/dist/collection/components/ic-alert/ic-alert.css

@@ -483,6 +483,11 @@ video {
   border: var(--ic-space-xxxs) solid var(--ic-alert-border-success);
 }
 
+.container-ai {
+  background-color: var(--ic-alert-background-ai);
+  border: var(--ic-space-xxxs) solid var(--ic-alert-border-ai);
+}
+
 .alert-icon-container {
   height: 100%;
   display: flex;
@@ -516,6 +521,10 @@ video {
   background-color: var(--ic-alert-status-type-success);
 }
 
+.divider-ai {
+  background-color: var(--ic-alert-status-type-ai);
+}
+
 .alert-icon {
   height: var(--ic-space-lg);
   width: 1.375rem;
@@ -563,6 +572,10 @@ video {
   fill: var(--ic-alert-icon-success);
 }
 
+:host([variant="ai"]) .alert-icon svg {
+  fill: var(--ic-alert-icon-ai);
+}
+
 .alert-content {
   display: flex;
   align-items: center;

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

@@ -282,7 +282,7 @@ export class Alert {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStatusVariants",
-                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "resolved": "\"ai\" | \"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                     "references": {
                         "IcStatusVariants": {
                             "location": "import",

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

@@ -43,6 +43,11 @@ export const Variants = {
         heading="Success"
         message="This alert is for displaying success messages. It has a very long message with lots of text which goes over multiple
         lines so the alert should expand as well to make sure it doesn't overflow"
+      ></ic-alert>
+      <ic-alert
+        variant="ai"
+        heading="Artificial Intelligence (AI)"
+        message="This alert is for displaying AI-related messages"
       ></ic-alert>`,
 
   name: "Variants",
@@ -251,10 +256,10 @@ export const Playground = {
 
   argTypes: {
     variant: {
-      options: ["neutral", "info", "warning", "error", "success"],
+      options: ["neutral", "info", "warning", "error", "success", "ai"],
 
       control: {
-        type: "select",
+        type: "inline-radio",
       },
     },
 

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js

@@ -131,15 +131,15 @@ export class BackToTop {
         const btnVariant = variant === "icon" ? "icon-secondary" : "secondary";
         const size = variant === "icon" ? "large" : "medium";
         const label = variant === "icon" ? "" : backToTopLabel;
-        return (h(Host, { key: '81025a66bc45c55d0caa94c0cd649ce2dfb7eb7c', class: {
+        return (h(Host, { key: '11f790112cc8047ab6b35459de506f6dc6a85c5f', class: {
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                 [`ic-back-to-top-${this.position}`]: true,
-            } }, h("ic-button", { key: '9855a53f4ea50219ba19022a5873b004704bf3a0', "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
+            } }, h("ic-button", { key: '670015cd630e897033a440ff4846d475c113a453', "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
                 ["offset-banner"]: bannerOffset,
                 ["show"]: !targetElVisible,
                 ["by-footer"]: footerVisible,
                 ["icon-only"]: variant === "icon",
-            }, theme: this.theme }, h("span", { key: '726b1b15f1e9168e9bb7826451357f6f559efa02', class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
+            }, theme: this.theme }, h("span", { key: 'e56c7a48a8226d1f471fc9a953851d27f4a6504c', class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
     }
     static get is() { return "ic-back-to-top"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-badge/ic-badge.css

@@ -62,6 +62,10 @@
   background-color: var(--ic-badge-success) !important;
 }
 
+:host(.ic-badge-ai) {
+  background-color: var(--ic-badge-ai) !important;
+}
+
 :host(.ic-badge-small) {
   height: var(--ic-space-sm);
   min-width: var(--ic-space-sm);

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

@@ -154,7 +154,7 @@ export class Badge {
     }
     render() {
         const { ariaLabel, el, foregroundColour, getLabel, position, size, label, type, variant, visible, theme, } = this;
-        return (h(Host, { key: '09942d6bfbdeb2793ef14cc7adf3293ba43bb479', class: {
+        return (h(Host, { key: '43b8e638c7b0965ad3591f8b306637b7b5aeea58', class: {
                 [`ic-badge-${position}`]: true,
                 [`ic-badge-${size}`]: true,
                 [`ic-badge-${variant}`]: true,
@@ -162,7 +162,7 @@ export class Badge {
                 [`ic-badge-foreground-${foregroundColour}`]: foregroundColour !== null && variant === "custom",
                 [`${visible ? "ic-badge-show" : "ic-badge-hide"}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { key: 'b11d77516fb8e7676af2e57b6e294c4debea4692', name: "badge-icon" }), type === "text" && label && (h("ic-typography", { key: '5c351c76e8c4fbfb1ec89dd89e7b099d48f16ab1', variant: size === "small" ? "badge-small" : "badge" }, getLabel())), type === "dot" && h("span", { key: '2db3b51d4ff7ab28b9dd12e72739871de623c5bd', class: "sr-only" }, "badge")));
+            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { key: '7f8a72f58bc485b3bfe69ef67d4e43d75a995f1f', name: "badge-icon" }), type === "text" && label && (h("ic-typography", { key: 'fe925213d388d0b3be444b9ab16a2a9a4cbc2649', variant: size === "small" ? "badge-small" : "badge" }, getLabel())), type === "dot" && h("span", { key: 'e6e8d7092112d105fb3914002b53a083c540fe47', class: "sr-only" }, "badge")));
     }
     static get is() { return "ic-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -370,7 +370,7 @@ export class Badge {
                 "mutable": false,
                 "complexType": {
                     "original": "IcBadgeVariants",
-                    "resolved": "\"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\" | undefined",
+                    "resolved": "\"ai\" | \"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcBadgeVariants": {
                             "location": "import",

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

@@ -651,6 +651,103 @@ export const Info = {
   name: "Info",
 };
 
+export const AI = {
+  render: () =>
+    html`<div style="padding:16px;">
+        <ic-button variant="secondary" style="margin-right:16px"
+          ><ic-badge label="1" slot="badge" variant="ai" size="small"></ic-badge
+          >Small</ic-button
+        >
+        <ic-button variant="secondary" style="margin-right:16px"
+          ><ic-badge label="1" slot="badge" variant="ai"></ic-badge
+          >Default</ic-button
+        >
+        <ic-button variant="secondary"
+          ><ic-badge label="1" slot="badge" variant="ai" size="large"></ic-badge
+          >Large</ic-button
+        >
+      </div>
+      <div style="padding:16px">
+        <ic-button variant="secondary" style="margin-right:16px"
+          ><ic-badge
+            type="dot"
+            slot="badge"
+            variant="ai"
+            size="small"
+          ></ic-badge
+          >Small Dot</ic-button
+        >
+        <ic-button variant="secondary" style="margin-right:16px"
+          ><ic-badge type="dot" slot="badge" variant="ai"></ic-badge>Default
+          Dot</ic-button
+        >
+        <ic-button variant="secondary"
+          ><ic-badge
+            type="dot"
+            slot="badge"
+            variant="ai"
+            size="large"
+          ></ic-badge
+          >Large Dot</ic-button
+        >
+      </div>
+      <div style="padding:16px">
+        <ic-button variant="secondary" style="margin-right:16px">
+          <ic-badge type="icon" slot="badge" variant="ai" size="small">
+            <svg
+              slot="badge-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              aria-label="Artificial Intelligence (AI)"
+            >
+              <path
+                d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
+              />
+            </svg>
+          </ic-badge>
+          Small Icon
+        </ic-button>
+        <ic-button variant="secondary" style="margin-right:16px">
+          <ic-badge type="icon" slot="badge" variant="ai">
+            <svg
+              slot="badge-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              aria-label="Artificial Intelligence (AI)"
+            >
+              <path
+                d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
+              />
+            </svg>
+          </ic-badge>
+          Default Icon
+        </ic-button>
+        <ic-button variant="secondary">
+          <ic-badge type="icon" slot="badge" variant="ai" size="large">
+            <svg
+              slot="badge-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              aria-label="Artificial Intelligence (AI)"
+            >
+              <path
+                d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
+              />
+            </svg>
+          </ic-badge>
+          Large Icon
+        </ic-button>
+      </div>`,
+
+  name: "AI",
+};
+
 export const Custom = {
   render: () =>
     html`<div style="padding:16px;">
@@ -1070,6 +1167,7 @@ export const Playground = {
         "warning",
         "error",
         "info",
+        "ai",
         "light",
         "custom",
       ],

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

@@ -88,11 +88,11 @@ export class Breadcrumb {
     render() {
         const { current, href, monochrome, pageTitle, showBackIcon, theme } = this;
         const describedById = `${pageTitle === null || pageTitle === void 0 ? void 0 : pageTitle.toLowerCase().replace(" ", "-")}-describedby`;
-        return (h(Host, { key: '55dd358ca0c5d865a9fdd17809b6d7f3ac12a966', class: {
+        return (h(Host, { key: '2c1131138a8be3af8ee344e0fbff5594fbcc2d77', class: {
                 "ic-breadcrumb-back": showBackIcon,
                 "ic-breadcrumb-monochrome": monochrome,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: '768e4c78b20b1ad9b0100ff2a36ce512db5d7c1c', class: "breadcrumb" }, h("span", { key: '930d48bd5661f977f0ce2edcc4ea3ce02c1e282a', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), showBackIcon && (h("span", { key: '0b932408b17ef65e2e25b6b4e124e2a4941d8eae', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))) : current ? (h("span", { class: "current-page-container" }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)) : (h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)))));
+            }, "aria-current": current && "page", role: "listitem" }, h("div", { key: 'ee77a3aeced7063c4dbab6e1641daf11242d63ca', class: "breadcrumb" }, h("span", { key: '1c2dc66e95e0676a381ab25769aa1b735ee5b9c5', innerHTML: chevronIcon, class: "chevron", "aria-hidden": "true" }), showBackIcon && (h("span", { key: '3857c2967dd82b45a2400107e50d6f03bc65cdde', id: describedById, class: "hide" }, `Back to ${pageTitle}`)), !href ? (h("div", { class: "slotted-link-container" }, showBackIcon && this.renderBackIcon(), h("span", { class: "link-wrapper" }, h("slot", null)))) : current ? (h("span", { class: "current-page-container" }, isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)) : (h("ic-link", { theme: theme, monochrome: monochrome, href: href, class: "breadcrumb-link", "aria-describedby": showBackIcon && describedById }, showBackIcon && this.renderBackIcon(), isSlotUsed(this.el, "icon") && h("slot", { name: "icon" }), pageTitle)))));
     }
     static get is() { return "ic-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.js

@@ -212,11 +212,11 @@ export class BreadcrumbGroup {
     }
     render() {
         const { backBreadcrumbOnly, collapsed, theme } = this;
-        return (h(Host, { key: 'c39081da4595fa3f6fca4325df9ecc8775201ecc', class: {
+        return (h(Host, { key: 'e9547e6fce74b57f2a3d7904bdca580c59abf881', class: {
                 "ic-breadcrumb-group-back": backBreadcrumbOnly,
                 "ic-breadcrumb-group-collapsed": collapsed,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("nav", { key: 'dffbf2a1a5e324c45e1d902f05eeef3e316c917a', "aria-label": "breadcrumbs" }, h("ol", { key: '29e18e2d0dfde13eeeec0dd2266b73e11a9b4a84' }, h("slot", { key: 'd6eb3a931fb3a7a8de0104960cfad4e54d6eeeaf' })))));
+            } }, h("nav", { key: '56fd90771323680169a7e2ff757c534f499bda48', "aria-label": "breadcrumbs" }, h("ol", { key: '2817e0c715c94937436a41222f86a0e5e6b9cc92' }, h("slot", { key: '137e284689752e6256c39ecc19988aafd3e49942' })))));
     }
     static get is() { return "ic-breadcrumb-group"; }
     static get encapsulation() { return "shadow"; }