@ukic/web-components 2.13.0 → 2.14.0

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

@@ -459,7 +459,8 @@ video {
   --icon-height: 100%;
 }
 
-.button {
+.button,
+::slotted(a) {
   font-family: var(--ic-font-body-family);
   text-decoration: none;
   font-weight: 600;
@@ -482,21 +483,25 @@ video {
   border-radius: 0.2188rem;
 }
 
-.button:hover {
+.button:hover,
+::slotted(a:hover) {
   cursor: pointer;
 }
 
 .button:focus,
 :host .button:focus,
-:host(.light) .button:focus {
+:host(.light) .button:focus,
+::slotted(a:focus) {
   box-shadow: var(--ic-border-focus);
 }
 
-.button:focus-visible {
+.button:focus-visible,
+::slotted(a:focus-visible) {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(.dark) .button {
+:host(.dark) .button,
+:host(.dark) ::slotted(a) {
   --button-default: var(--ic-action-dark);
   --button-default-hover: var(--ic-action-dark);
   --button-default-active: var(--ic-action-dark);
@@ -504,7 +509,8 @@ video {
   --button-default-background-active: var(--ic-action-dark-bg-active);
 }
 
-:host(.light) .button {
+:host(.light) .button,
+:host(.light) ::slotted(a) {
   --button-default: var(--ic-action-light);
   --button-default-hover: var(--ic-action-light);
   --button-default-active: var(--ic-action-light);
@@ -512,7 +518,8 @@ video {
   --button-default-background-active: var(--ic-action-light-bg-active);
 }
 
-:host(.white-background) .button {
+:host(.white-background) .button,
+:host(.white-background) ::slotted(a) {
   --button-default-background-hover: var(--ic-action-default-bg-hover-no-alpha);
   --button-default-background-active: var(
     --ic-action-default-bg-active-no-alpha
@@ -521,25 +528,29 @@ video {
   background-color: var(--ic-architectural-white);
 }
 
-:host(.white-background.dark) .button {
+:host(.white-background.dark) .button,
+:host(.white-background.dark) ::slotted(a) {
   --button-default-background-hover: var(--ic-action-dark-bg-hover-no-alpha);
   --button-default-background-active: var(--ic-action-dark-bg-active-no-alpha);
 }
 
-:host(.button-variant-primary.light) .button {
+:host(.button-variant-primary.light) .button,
+:host(.button-variant-primary.light) ::slotted(a) {
   color: var(--ic-color-primary-text);
 
   --button-default-hover: var(--ic-action-light-hover);
   --button-default-active: var(--ic-action-light-active);
 }
 
-:host(.button-variant-primary.dark) .button {
+:host(.button-variant-primary.dark) .button,
+:host(.button-variant-primary.dark) ::slotted(a) {
   --button-default-hover: var(--ic-action-dark-hover);
   --button-default-active: var(--ic-action-dark-active);
 }
 
 :host(.disabled),
 :host(.disabled) .button,
+:host(.disabled) ::slotted(a),
 :host(.loading),
 :host(.loading) .button {
   pointer-events: none;
@@ -558,7 +569,8 @@ video {
 
 /* Primary */
 
-:host(.button-variant-primary) .button {
+:host(.button-variant-primary) .button,
+:host(.button-variant-primary) ::slotted(a) {
   color: var(--ic-architectural-white);
   background-color: var(--button-default);
 }
@@ -572,7 +584,8 @@ video {
   border-color: var(--button-default-hover);
 }
 
-:host(.button-variant-primary:not(.light)) .button:hover:focus {
+:host(.button-variant-primary:not(.light)) .button:hover:focus,
+:host(.button-variant-primary:not(.light)) ::slotted(a:hover:focus) {
   color: var(--ic-architectural-white);
 }
 
@@ -589,29 +602,35 @@ video {
   background-color: var(--button-default-active);
 }
 
-:host(.button-variant-primary:not(.light)) .button:active {
+:host(.button-variant-primary:not(.light)) .button:active,
+:host(.button-variant-primary:not(.light)) ::slotted(a:active) {
   color: var(--ic-architectural-white);
 }
 
-:host(.button-variant-primary.disabled) .button {
+:host(.button-variant-primary.disabled) .button,
+:host(.button-variant-primary.disabled) ::slotted(a) {
   background: var(--ic-architectural-200);
   color: var(--ic-architectural-300);
 }
 
-:host(.button-variant-primary.light.disabled) .button {
+:host(.button-variant-primary.light.disabled) .button,
+:host(.button-variant-primary.light.disabled) ::slotted(a) {
   background: var(--ic-architectural-600);
   color: var(--ic-architectural-500);
 }
 
 /* Secondary  */
 
-:host(.button-variant-secondary) .button {
+:host(.button-variant-secondary) .button,
+:host(.button-variant-secondary) ::slotted(a) {
   border: var(--ic-border-width) solid var(--button-default);
   color: var(--button-default);
 }
 
 :host(.button-variant-secondary) .button:hover:not(:focus),
-:host(.button-variant-secondary) .button:hover:focus {
+:host(.button-variant-secondary) .button:hover:focus,
+:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-secondary) ::slotted(a:hover:focus) {
   background-color: var(--button-default-background-hover);
   border-color: var(--button-default-hover);
   color: var(--button-default-hover);
@@ -619,7 +638,10 @@ video {
 
 :host(.button-variant-secondary) .button:active:not(:focus),
 :host(.button-variant-secondary) .button:active:focus,
-:host(.button-variant-secondary) .button:active {
+:host(.button-variant-secondary) .button:active,
+:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),
+:host(.button-variant-secondary) ::slotted(a:active:focus),
+:host(.button-variant-secondary) ::slotted(a:active) {
   border-color: var(--button-default-active);
   background-color: var(--button-default-background-active);
   color: var(--button-default-active);
@@ -633,7 +655,10 @@ video {
 
 :host(.button-variant-secondary.disabled) .button,
 :host(.button-variant-secondary.disabled) .button:hover,
-:host(.button-variant-secondary.disabled) .button:active {
+:host(.button-variant-secondary.disabled) .button:active,
+:host(.button-variant-secondary.disabled) ::slotted(a),
+:host(.button-variant-secondary.disabled) ::slotted(a:hover),
+:host(.button-variant-secondary.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-300);
   color: var(--ic-architectural-300);
   background: none;
@@ -641,7 +666,10 @@ video {
 
 :host(.button-variant-secondary.light.disabled) .button,
 :host(.button-variant-secondary.light.disabled) .button:hover,
-:host(.button-variant-secondary.light.disabled) .button:active {
+:host(.button-variant-secondary.light.disabled) .button:active,
+:host(.button-variant-secondary.light.disabled) ::slotted(a),
+:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),
+:host(.button-variant-secondary.light.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-500);
   color: var(--ic-architectural-500);
   background: none;
@@ -649,12 +677,15 @@ video {
 
 /* Tertiary */
 
-:host(.button-variant-tertiary) .button {
+:host(.button-variant-tertiary) .button,
+:host(.button-variant-tertiary) ::slotted(a) {
   color: var(--button-default);
 }
 
 :host(.button-variant-tertiary) .button:hover:not(:focus),
-:host(.button-variant-tertiary) .button:hover:focus {
+:host(.button-variant-tertiary) .button:hover:focus,
+:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-tertiary) ::slotted(a:hover:focus) {
   background-color: var(--button-default-background-hover);
   color: var(--button-default-hover);
 }
@@ -662,6 +693,9 @@ video {
 :host(.button-variant-tertiary) .button:active:not(:focus),
 :host(.button-variant-tertiary) .button:active:focus,
 :host(.button-variant-tertiary) .button:active,
+:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),
+:host(.button-variant-tertiary) ::slotted(a:active:focus),
+:host(.button-variant-tertiary) ::slotted(a:active),
 :host(.button-variant-tertiary.loading) .button {
   background-color: var(--button-default-background-active);
   color: var(--button-default-active);
@@ -669,7 +703,10 @@ video {
 
 :host(.button-variant-tertiary.disabled) .button,
 :host(.button-variant-tertiary.disabled) .button:hover,
-:host(.button-variant-tertiary.disabled) .button:active {
+:host(.button-variant-tertiary.disabled) .button:active,
+:host(.button-variant-tertiary.disabled) ::slotted(a),
+:host(.button-variant-tertiary.disabled) ::slotted(a:hover),
+:host(.button-variant-tertiary.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-300);
   color: var(--ic-architectural-300);
   background: none;
@@ -677,7 +714,10 @@ video {
 
 :host(.button-variant-tertiary.light.disabled) .button,
 :host(.button-variant-tertiary.light.disabled) .button:hover,
-:host(.button-variant-tertiary.light.disabled) .button:active {
+:host(.button-variant-tertiary.light.disabled) .button:active,
+:host(.button-variant-tertiary.light.disabled) ::slotted(a),
+:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),
+:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-500);
   color: var(--ic-architectural-500);
   background: none;
@@ -685,7 +725,8 @@ video {
 
 /* Icon */
 
-:host(.button-variant-icon) .button {
+:host(.button-variant-icon) .button,
+:host(.button-variant-icon) ::slotted(a) {
   color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
@@ -698,12 +739,15 @@ video {
 }
 
 :host(.button-variant-icon) .button:hover:not(:focus),
-:host(.button-variant-icon) .button:hover:focus {
+:host(.button-variant-icon) .button:hover:focus,
+:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-icon) ::slotted(a:hover:focus) {
   background-color: var(--button-default-background-hover);
   color: var(--button-default-hover);
 }
 
 :host(.button-variant-icon) .button:active:not(:focus),
+:host(.button-variant-icon) ::slotted(a:active:not(:focus)),
 :host(.button-variant-icon.loading) .button {
   background-color: var(--button-default-background-active);
   color: var(--button-default-active);
@@ -711,14 +755,18 @@ video {
 
 :host(.button-variant-icon.disabled) .button,
 :host(.button-variant-icon.disabled) .button:hover,
-:host(.button-variant-icon.disabled) .button:active {
+:host(.button-variant-icon.disabled) .button:active,
+:host(.button-variant-icon.disabled) ::slotted(a),
+:host(.button-variant-icon.disabled) ::slotted(a:hover),
+:host(.button-variant-icon.disabled) ::slotted(a:active) {
   color: var(--ic-architectural-300);
   background: none;
 }
 
 /* Destructive */
 
-:host(.button-variant-destructive) .button {
+:host(.button-variant-destructive) .button,
+:host(.button-variant-destructive) ::slotted(a) {
   color: var(--ic-architectural-white);
   background-color: var(--ic-action-destructive);
   text-transform: uppercase;
@@ -735,7 +783,8 @@ video {
   background-color: var(--ic-action-destructive-active);
 }
 
-:host(.button-variant-destructive.disabled) .button {
+:host(.button-variant-destructive.disabled) .button,
+:host(.button-variant-destructive.disabled) ::slotted(a) {
   background: var(--ic-architectural-200);
   color: var(--ic-architectural-300);
 }
@@ -757,19 +806,22 @@ video {
   padding: var(--ic-space-sm) var(--ic-space-md);
 }
 
-:host(.button-size-default.button-variant-icon) .button {
+:host(.button-size-default.button-variant-icon) .button,
+:host(.button-size-default.button-variant-icon) ::slotted(a) {
   height: var(--height, var(--ic-space-xl));
   width: var(--ic-space-xl);
   padding: 0.375rem;
 }
 
-:host(.button-size-small.button-variant-icon) .button {
+:host(.button-size-small.button-variant-icon) .button,
+:host(.button-size-small.button-variant-icon) ::slotted(a) {
   height: var(--height, var(--ic-space-lg));
   width: var(--ic-space-lg);
   padding: var(--ic-space-xxs);
 }
 
-:host(.button-size-large.button-variant-icon) .button {
+:host(.button-size-large.button-variant-icon) .button,
+:host(.button-size-large.button-variant-icon) ::slotted(a) {
   height: var(--height, 2.5rem);
   width: 2.5rem;
   padding: var(--ic-space-xs);
@@ -777,7 +829,8 @@ video {
 
 /* Width */
 :host(.full-width),
-:host(.full-width) .button {
+:host(.full-width) .button,
+:host(.full-width) ::slotted(a) {
   width: 100%;
 }
 
@@ -931,10 +984,149 @@ div.right-icon {
   padding-right: var(--ic-space-xs);
 }
 
+/** Slotted router item **/
+slot[name="router-item"]::slotted(a) {
+  pointer-events: all;
+}
+
+::slotted(a) {
+  font-size: 0.875rem !important;
+  border: none !important;
+  vertical-align: middle !important;
+}
+
+:host(.white-background) ::slotted(a) {
+  background-color: var(--ic-architectural-white) !important;
+}
+
+:host(.button-variant-primary) ::slotted(a) {
+  background-color: var(--button-default) !important;
+}
+
+:host(.button-variant-primary) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-primary) ::slotted(a:hover:focus) {
+  background-color: var(--button-default-hover) !important;
+}
+
+:host(.button-variant-primary) ::slotted(a:active:not(:focus)),
+:host(.button-variant-primary) ::slotted(a:active),
+:host(.button-variant-primary) ::sloted(a:active:focus) {
+  background-color: var(--button-default-active) !important;
+}
+
+:host(.button-variant-primary.disabled) ::slotted(a),
+:host(.button-variant-destructive.disabled) ::slotted(a) {
+  background: var(--ic-architectural-200) !important;
+}
+
+:host(.button-variant-primary.light.disabled) ::slotted(a) {
+  background: var(--ic-architectural-600) !important;
+}
+
+:host(.button-variant-secondary) ::slotted(a) {
+  border: var(--ic-border-width) solid var(--button-default) !important;
+}
+
+:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-secondary) ::slotted(a:hover:focus) {
+  background-color: var(--button-default-background-hover) !important;
+  border-color: var(--button-default-hover) !important;
+}
+
+:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),
+:host(.button-variant-secondary) ::slotted(a:active:focus),
+:host(.button-variant-secondary) ::slotted(a:active) {
+  border-color: var(--button-default-active) !important;
+  background-color: var(--button-default-background-active) !important;
+}
+
+:host(.button-variant-secondary.disabled) ::slotted(a),
+:host(.button-variant-secondary.disabled) ::slotted(a:hover),
+:host(.button-variant-secondary.disabled) ::slotted(a:active),
+:host(.button-variant-tertiary.disabled) ::slotted(a),
+:host(.button-variant-tertiary.disabled) ::slotted(a:hover),
+:host(.button-variant-tertiary.disabled) ::slotted(a:active) {
+  border-color: var(--ic-architectural-300) !important;
+  background: none !important;
+}
+
+:host(.button-variant-secondary.light.disabled) ::slotted(a),
+:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),
+:host(.button-variant-secondary.light.disabled) ::slotted(a:active),
+:host(.button-variant-tertiary.light.disabled) ::slotted(a),
+:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),
+:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {
+  border-color: var(--ic-architectural-500) !important;
+  background: none !important;
+}
+
+:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-tertiary) ::slotted(a:hover:focus),
+:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-icon) ::slotted(a:hover:focus) {
+  background-color: var(--button-default-background-hover) !important;
+}
+
+:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),
+:host(.button-variant-tertiary) ::slotted(a:active:focus),
+:host(.button-variant-tertiary) ::slotted(a:active),
+:host(.button-variant-icon) ::slotted(a:active:not(:focus)) {
+  background-color: var(--button-default-background-active) !important;
+}
+
+:host(.button-variant-icon.disabled) ::slotted(a),
+:host(.button-variant-icon.disabled) ::slotted(a:hover),
+:host(.button-variant-icon.disabled) ::slotted(a:active) {
+  background: none !important;
+}
+
+:host(.button-variant-destructive) ::slotted(a) {
+  background-color: var(--ic-action-destructive) !important;
+}
+
+:host(.button-variant-destructive) ::slotted(a:hover:not(:focus)),
+:host(.button-variant-destructive) ::slotted(a:hover:focus) {
+  background-color: var(--ic-action-destructive-hover) !important;
+}
+
+:host(.button-variant-destructive) ::slotted(a:active:not(:focus)),
+:host(.button-variant-destructive) ::slotted(a:active:focus) {
+  background-color: var(--ic-action-destructive-active) !important;
+}
+
+:host(.button-size-default) ::slotted(a) {
+  height: var(--height, 2.5rem) !important;
+  padding: var(--ic-space-xs) var(--ic-space-md) !important;
+}
+
+:host(.button-size-small) ::slotted(a) {
+  height: var(--height, var(--ic-space-xl)) !important;
+  padding: var(--ic-space-xxs) var(--ic-space-md) !important;
+}
+
+:host(.button-size-large) ::slotted(a) {
+  height: var(--height, var(--ic-space-xxl)) !important;
+  padding: var(--ic-space-sm) var(--ic-space-md) !important;
+}
+
+:host(.button-size-default.button-variant-icon) ::slotted(a) {
+  height: var(--height, var(--ic-space-xl)) !important;
+  padding: 0.375rem !important;
+}
+
+:host(.button-size-small.button-variant-icon) ::slotted(a) {
+  padding: var(--ic-space-xxs) !important;
+}
+
+:host(.button-size-large.button-variant-icon) ::slotted(a) {
+  padding: var(--ic-space-xs) !important;
+}
+
 /** High Contrast **/
 @media (forced-colors: active) {
-  .button {
-    border: 0.125rem solid transparent;
+  .button,
+  ::slotted(a) {
+    border: 0.125rem solid transparent !important;
   }
 }
 

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

@@ -22,6 +22,7 @@ let buttonIds = 0;
  * @slot right-icon - Content will be placed to the right of the button label.
  * @slot top-icon - Content will be placed above the button label.
  * @slot badge - Badge component overlaying the top right of the button.
+ * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.
  */
 export class Button {
     constructor() {
@@ -47,6 +48,7 @@ export class Button {
         };
         this.handleClick = () => {
             if ((this.el.type === "submit" || this.el.type === "reset") &&
+                !this.hasRouterSlot() &&
                 !!this.el.closest("FORM")) {
                 this.handleHiddenFormButtonClick(this.el.closest("FORM"));
             }
@@ -201,14 +203,16 @@ export class Button {
         (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
     }
     handleHostClick(event) {
-        if (this.fileUpload) {
-            this.openFileExplorer();
-        }
-        if (this.disabled || this.loading) {
-            event.stopImmediatePropagation();
-        }
-        if (this.dropdown) {
-            this.dropdownExpanded = !this.dropdownExpanded;
+        if (!this.hasRouterSlot()) {
+            if (this.fileUpload) {
+                this.openFileExplorer();
+            }
+            if (this.disabled || this.loading) {
+                event.stopImmediatePropagation();
+            }
+            if (this.dropdown) {
+                this.dropdownExpanded = !this.dropdownExpanded;
+            }
         }
     }
     themeChangeHandler(ev) {
@@ -239,6 +243,13 @@ export class Button {
         const iconEl = this.el.querySelector(`[slot="right-icon"]`);
         return iconEl !== null;
     }
+    hasRouterSlot() {
+        this.routerSlot = this.el.querySelector('[slot="router-item"]');
+        if (this.routerSlot) {
+            this.routerSlot.ariaLabel = this.routerSlot.textContent;
+        }
+        return !!this.routerSlot;
+    }
     handleHiddenFormButtonClick(form) {
         const hiddenFormButton = document.createElement("button");
         hiddenFormButton.setAttribute("type", this.el.type);
@@ -291,7 +302,7 @@ export class Button {
             describedBy = this.describedById;
         }
         const ButtonContent = () => {
-            return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.hasTopIconSlot() &&
+            return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.hasTopIconSlot() &&
                 !this.hasLeftIconSlot() &&
                 !this.hasRightIconSlot() &&
                 !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "top-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
@@ -323,7 +334,8 @@ export class Button {
                 ["white-background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
                     this.appearance !== "light",
-            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isTooltipSilent() }, h(ButtonContent, null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
+            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isTooltipSilent() }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
+            (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
     }
     static get is() { return "ic-button"; }
     static get encapsulation() { return "shadow"; }