@ukic/web-components 3.8.0 → 3.10.0

package/dist/collection/components/ic-action-chip/ic-action-chip.css

@@ -459,7 +459,7 @@ video {
   color: var(--text-color);
   cursor: pointer;
   display: flex;
-  padding: var(--ic-space-xxs);
+  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);
   position: relative;
   text-decoration: none;
 
@@ -480,12 +480,12 @@ video {
 
 .small {
   border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
-  padding: var(--ic-space-xxxs);
+  padding: var(--ic-space-1px) var(--ic-space-xxxs);
 }
 
 .large {
   border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));
-  padding: var(--ic-space-xs);
+  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);
 }
 
 .outlined {

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.stories.js

@@ -1,5 +1,14 @@
 import { html } from "lit-html";
 
+const defaultArgs = {
+  target: "topEl",
+  theme: "inherit",
+  variant: "default",
+  position: "right",
+};
+
+const INLINE_RADIO = "inline-radio";
+
 export default {
   title: "Web Components/Back to top",
   component: "ic-back-to-top",
@@ -214,3 +223,173 @@ export const PageExample = {
 
   name: "Page example",
 };
+
+export const Playground = {
+  render: (args) => html`
+    <div
+      id="header"
+      style="width:100%;height:100px;background-color:#23508e;color:var(--ic-architectural-white)"
+    >
+      <ic-typography variant="h1">Header</ic-typography>
+      <ic-button variant="secondary" appearance="light">Button</ic-button>
+    </div>
+    <div id="topEl">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <ic-typography variant="h3">Some content</ic-typography>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit
+      turpis. Cras ac ligula et lectus mollis molestie in a enim. In ac turpis
+      in leo rutrum eleifend. Fusce consectetur posuere ligula, vitae semper
+      lorem mollis vitae. Fusce vel blandit turpis. Nulla justo ligula, egestas
+      quis rutrum id, vulputate eget diam. Integer mattis quis nisi id blandit.
+      Duis nisi lectus, suscipit elementum iaculis sed, porta et risus.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">More content</ic-typography>
+    <p>
+      Phasellus accumsan ligula enim, a iaculis sapien rhoncus vitae. Curabitur
+      pulvinar posuere diam in luctus. Sed blandit diam id odio aliquam aliquet.
+      Pellentesque eros enim, tristique vel mattis eu, blandit at enim.
+      Pellentesque sollicitudin pellentesque tellus vel eleifend. Nulla mauris
+      lorem, porttitor vel orci eu, iaculis maximus nunc. Ut rhoncus ex ipsum.
+      Mauris ultricies, augue sed eleifend pellentesque, leo purus efficitur
+      orci, sit amet volutpat tortor diam non lorem. Morbi venenatis neque vel
+      accumsan sagittis. Nunc rutrum augue non urna tincidunt auctor in at
+      libero. Sed in risus sit amet nisl tempor viverra. Phasellus maximus
+      sapien eu erat maximus iaculis. Praesent ultricies id orci eu euismod.
+      Fusce eu urna turpis. Praesent ut neque tincidunt, porta sem id, accumsan
+      massa.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some other content</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some more</ic-typography>
+    <p>
+      Etiam accumsan nibh erat, condimentum tempus metus suscipit nec. Duis
+      placerat varius dolor eget ornare. Vestibulum egestas tellus non tellus
+      ornare, eu scelerisque erat pulvinar. Nam tempus lacus eu libero
+      consequat, in elementum magna ultricies. Etiam at suscipit odio. Duis quis
+      quam vitae quam varius luctus. Aliquam erat volutpat. Fusce laoreet
+      consectetur tortor, ac suscipit sem feugiat non. Etiam tempus tellus
+      aliquet orci pretium, nec pretium nulla faucibus
+    </p>
+    <br />
+    <ic-button>Button</ic-button>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Nearly there</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">The end</ic-typography>
+    <br />
+    <ic-back-to-top
+      target=${args.target}
+      variant=${args.variant}
+      theme=${args.theme}
+      position=${args.position}
+    ></ic-back-to-top>
+    <footer>
+      <div
+        id="footer"
+        style="width:100%;height:200px;background-color:#23508e;color:var(--ic-architectural-white)"
+      >
+        <ic-typography variant="h3">Footer</ic-typography>
+      </div>
+    </footer>
+    <ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>
+  `,
+
+  args: defaultArgs,
+
+  argTypes: {
+    target: {
+      table: {
+        disable: true,
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: INLINE_RADIO,
+      },
+    },
+
+    variant: {
+      options: ["default", "icon"],
+
+      control: {
+        type: INLINE_RADIO,
+      },
+    },
+    position: {
+      options: ["left", "center", "right"],
+
+      control: {
+        type: INLINE_RADIO,
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -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-button/ic-button.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Host, forceUpdate, h, Fragment, } from "@stencil/core";
-import { getBrandFromContext, inheritAttributes, isSlotUsed, removeDisabledFalse, renderFileHiddenInput, } from "../../utils/helpers";
+import { getBrandFromContext, handleHiddenFormButtonClick, inheritAttributes, isSlotUsed, removeDisabledFalse, renderFileHiddenInput, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcBrandForegroundEnum, } from "../../utils/types";
 import arrowDropdown from "../../assets/arrow-dropdown.svg";
@@ -90,6 +90,10 @@ export class Button {
          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
         this.theme = "inherit";
+        /**
+         * Setting to `true` can help in situations where tooltip content is clipped by a parent element.
+         */
+        this.tooltipFixedPositioning = false;
         /**
          * The position of the tooltip in relation to the button.
          */
@@ -108,16 +112,13 @@ export class Button {
         this.variant = "primary";
         this.getSlottedIcon = (position) => this.el.querySelector(`[slot="${position}-icon"]`);
         this.handleClick = () => {
-            var _a;
             if ((this.el.type === "submit" || this.el.type === "reset") &&
                 !this.hasRouterSlot() &&
-                !!this.el.closest("FORM")) {
-                const hiddenFormButton = document.createElement("button");
-                hiddenFormButton.setAttribute("type", this.el.type);
-                hiddenFormButton.style.display = "none";
-                (_a = this.el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.appendChild(hiddenFormButton);
-                hiddenFormButton.click();
-                hiddenFormButton.remove();
+                (this.form || !!this.el.closest("FORM"))) {
+                const form = this.form
+                    ? document.querySelector(`form[id=${this.form}]`)
+                    : this.el.closest("FORM");
+                handleHiddenFormButtonClick(form, this.el);
             }
         };
         this.handleKeyDown = (ev) => {
@@ -334,7 +335,7 @@ export class Button {
         }
     }
     render() {
-        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedByContent, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipPlacement, transparentBackground, type, variant, } = this;
+        const { ariaControlsId, ariaLabel, ariaOwnsId, buttonIdNum, describedByContent, describedById, disabled, download, dropdown, dropdownExpanded, form, formaction, formenctype, formmethod, formnovalidate, formtarget, fullWidth, handleClick, handleKeyDown, hasTooltip, href, hreflang, id, inheritedAttributes, isIconVariant, loading, monochrome, onBlur, onFocus, referrerpolicy, rel, size, target, theme, title, tooltipFixedPositioning, tooltipPlacement, transparentBackground, type, variant, } = this;
         const TagType = href ? "a" : "button";
         const buttonAttrs = TagType === "button"
             ? {
@@ -372,7 +373,7 @@ export class Button {
                 variant !== "destructive" && (h("span", { class: dropdownExpanded
                     ? "dropdown-expanded"
                     : "arrow-dropdown", innerHTML: arrowDropdown }))))));
-        return (h(Host, { key: '7ec6ab29cee9c1d669ffb4d181291ac2767cbbec', class: {
+        return (h(Host, { key: '93677b4fa42904890e9fa3b33297734b895f04a4', class: {
                 "ic-button-disabled": disabled && !loading,
                 "ic-button-full-width": fullWidth,
                 "ic-button-loading": loading,
@@ -388,7 +389,7 @@ export class Button {
                 monochrome,
                 "top-icon": isSlotUsed(this.el, "top-icon"),
                 "with-badge": isSlotUsed(this.el, "badge"),
-            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: 'b9b1e24da3a9ca2e9aa33edf0dfde63f82473057', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: 'e2655f2e1623bb7a6177e8404a68ab1ab9c868a6' }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'ca43b11aeff88a1c9a46ae22cd8836405f96753e', name: "badge" }), !hasTooltip && h(ButtonContent, { key: '3dd73eb3d140dd26aee9f245166142094762bc5c' }), describedByContent && (h("span", { key: 'a38105ef6599d3b251b8528446db9f700982681e', id: describedby, class: "ic-button-describedby" }, describedByContent))));
+            }, onClick: handleClick, onKeyDown: handleKeyDown, "aria-owns": ariaOwnsId, "aria-controls": ariaControlsId, "aria-expanded": dropdown && `${dropdownExpanded}` }, hasTooltip && (h("ic-tooltip", { key: '273a8bb9c3146fc8fb2b177d842f6ac17a0db0fb', id: describedby, label: title || ariaLabel, target: buttonId, placement: tooltipPlacement, fixedPositioning: tooltipFixedPositioning, silent: isIconVariant() && !!ariaLabel }, h(ButtonContent, { key: '092785c68429f1458a74e2f9aa611179ce5d490c' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '002e2fd22a45138708c9a188f87cb37c6c6c386d', name: "badge" }), !hasTooltip && h(ButtonContent, { key: '3d3634e2078b0d52e687cc4068e5e80f6ff8a8a2' }), describedByContent && (h("span", { key: '6e134f3c30402bb3217c284df65d72aca696043c', id: describedby, class: "ic-button-describedby" }, describedByContent))));
     }
     static get is() { return "ic-button"; }
     static get encapsulation() { return "shadow"; }
@@ -977,6 +978,26 @@ export class Button {
                 "reflect": false,
                 "defaultValue": "\"inherit\""
             },
+            "tooltipFixedPositioning": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Setting to `true` can help in situations where tooltip content is clipped by a parent element."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tooltip-fixed-positioning",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "tooltipPlacement": {
                 "type": "string",
                 "mutable": false,