@limetech/lime-elements 36.1.0-dev.2 → 36.1.0-dev.4

package/dist/collection/components/list/list.css

@@ -3810,9 +3810,14 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
+  background-color: rgb(var(--contrast-300));
+  z-index: 1;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {
   cursor: not-allowed;
 }
@@ -3925,132 +3930,22 @@ a.mdc-list-item {
   margin-right: 0.75rem;
 }
 
-.mdc-deprecated-list-item.mdc-ripple-upgraded {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:hover::before, .mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--background-focused::before, .mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__text:before {
-  content: "";
+.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before {
   background-color: var(--mdc-theme-primary);
-  position: absolute;
-  inset: 0;
   opacity: 0.15;
-  pointer-events: none;
 }
 
-@keyframes fade-out-focus-style {
-  0% {
-    opacity: 0.12;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused::before, :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus::before {
-  animation: fade-out-focus-style 1s ease forwards;
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus {
+  outline: none;
 }
 :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
+}
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
   border-radius: 0.375rem;
   z-index: 1;
 }
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible:before {
-  animation-duration: 0s !important;
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:before {
-  transition: opacity, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-}
 
 /*
  * This file is imported into every component!

package/dist/collection/components/list/list.js

@@ -1,5 +1,4 @@
 import { MDCList } from '@material/list';
-import { MDCRipple } from '@material/ripple';
 import { strings as listStrings } from '@material/list/constants';
 import { h, Host, } from '@stencil/core';
 import { ListRenderer } from './list-renderer';
@@ -34,7 +33,6 @@ export class List {
       }
       this.mdcList = new MDCList(element);
       this.mdcList.hasTypeahead = true;
-      this.mdcList.listElements.forEach((item) => new MDCRipple(item));
     };
     this.setupListeners = () => {
       if (!this.mdcList) {

package/dist/collection/components/menu-list/menu-list.css

@@ -3816,9 +3816,14 @@ a.mdc-list-item {
   border-radius: 0.375rem;
 }
 .mdc-deprecated-list .mdc-deprecated-list-item {
+  transition: background-color 0.2s ease;
   box-sizing: border-box;
   z-index: 0;
 }
+.mdc-deprecated-list .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
+  background-color: rgb(var(--contrast-300));
+  z-index: 1;
+}
 .mdc-deprecated-list .mdc-deprecated-list-item.mdc-deprecated-list-item--disabled {
   cursor: not-allowed;
 }
@@ -3931,132 +3936,22 @@ a.mdc-list-item {
   margin-right: 0.75rem;
 }
 
-.mdc-deprecated-list-item.mdc-ripple-upgraded {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  will-change: transform, opacity;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
-  left: 0;
-  transform: scale(0);
-  transform-origin: center center;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--unbounded::after {
-  top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-activation::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--foreground-deactivation::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded::before, .mdc-deprecated-list-item.mdc-ripple-upgraded::after {
-  background-color: #000;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #000);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:hover::before, .mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-surface--hover::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded--background-focused::before, .mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-deprecated-list-item.mdc-ripple-upgraded.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__text:before {
-  content: "";
+.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before {
   background-color: var(--mdc-theme-primary);
-  position: absolute;
-  inset: 0;
   opacity: 0.15;
-  pointer-events: none;
 }
 
-@keyframes fade-out-focus-style {
-  0% {
-    opacity: 0.12;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused::before, :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus::before {
-  animation: fade-out-focus-style 1s ease forwards;
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus {
+  outline: none;
 }
 :not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
+  outline: none;
   box-shadow: var(--shadow-depth-8-focused);
+}
+:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible {
   border-radius: 0.375rem;
   z-index: 1;
 }
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:focus-visible:before {
-  animation-duration: 0s !important;
-}
-:not(.mdc-deprecated-list--non-interactive) > :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:before {
-  transition: opacity, background-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease;
-}
 
 /*
  * This file is imported into every component!

package/dist/collection/components/select/select.css

@@ -1768,19 +1768,13 @@
   background-color: rgba(var(--contrast-100), 0.8);
 }
 .limel-select .limel-select-trigger {
+  border: none;
   height: 3.5rem;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   border-radius: 0.3125rem;
 }
-.limel-select .limel-select-trigger:focus {
-  outline: none;
-}
-.limel-select .limel-select-trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
 .limel-select .limel-select-trigger .mdc-floating-label {
   color: rgba(var(--contrast-1200), 1);
   width: calc(
@@ -1811,6 +1805,13 @@
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus {
+  outline: none;
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger.limel-select--focused {
   background-color: rgba(var(--contrast-100), 0.8);
 }

package/dist/collection/components/select/select.template.js

@@ -1,12 +1,15 @@
 import { h } from '@stencil/core';
 import { isMultiple } from '../../util/multiple';
 export const SelectTemplate = (props) => {
+  const value = props.value;
   let hasValue = !!props.value;
-  if (isMultiple(props.value)) {
-    hasValue = props.value.length > 0;
+  let hasEmptyText = true;
+  if (isMultiple(value)) {
+    hasValue = value.length > 0;
   }
   else if (hasValue) {
-    hasValue = !!props.value.value;
+    hasValue = !!value.value;
+    hasEmptyText = value.text === '';
   }
   let isValid = !props.invalid;
   if (props.checkValid && props.required && !hasValue) {
@@ -23,7 +26,7 @@ export const SelectTemplate = (props) => {
     'limel-select--empty': !hasValue,
     'limel-select--with-helper-text': typeof props.helperText === 'string',
   };
-  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid })), h(HelperText, { text: props.helperText }), h(SelectDropdown, Object.assign({}, props))));
+  return (h("div", { class: classList }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText })), h(HelperText, { text: props.helperText }), h(SelectDropdown, Object.assign({}, props))));
 };
 const SelectValue = (props) => {
   const anchorClassList = {
@@ -33,10 +36,12 @@ const SelectValue = (props) => {
   };
   const labelClassList = {
     'mdc-floating-label': true,
-    'mdc-floating-label--float-above': props.hasValue || props.isOpen || props.readonly,
+    'mdc-floating-label--float-above': (!props.hasEmptyText && props.hasValue) ||
+      props.isOpen ||
+      props.readonly,
     'mdc-floating-label--active': props.isOpen,
   };
-  return (h("div", { class: anchorClassList, tabindex: "0", onClick: props.open, onKeyPress: props.onTriggerPress, role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, "aria-disabled": props.disabled }, h("span", { id: "s-label", class: labelClassList }, props.label), h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value, props.readonly))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+  return (h("button", { class: anchorClassList, onClick: props.open, onKeyPress: props.onTriggerPress, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": "s-label s-selected-text", "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { id: "s-label", class: labelClassList }, props.label), h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), h("span", { id: "s-selected-text", class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value, props.readonly))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
   if (props.isValid) {

package/dist/collection/components/shortcut/shortcut.js

@@ -2,10 +2,11 @@ import { h } from '@stencil/core';
 /**
  * This component can be used on places such as a start page or a dashboard.
  * Clicking on the component should navigate the user to a new screen,
- * to which you need to provide a URL, using the `href` property.
+ * to which you need to provide a URL, by specifying an `href` for the `link` property.
  *
  * By default, this navigation will happen within the same browser tab.
- * However, it is possible to override that behavior, using the `target` property.
+ * However, it is possible to override that behavior, by specifying a `target`
+ * for the `link` property
  *
  * @exampleComponent limel-example-shortcut
  * @exampleComponent limel-example-shortcut-notification
@@ -20,14 +21,15 @@ export class Shortcut {
       }
     };
     this.getAriaLabel = () => {
-      if (this.label && this.linkTitle) {
-        return this.label + '. ' + this.linkTitle;
+      var _a, _b;
+      if (this.label && ((_a = this.link) === null || _a === void 0 ? void 0 : _a.title)) {
+        return this.label + '. ' + this.link.title;
       }
       if (this.label) {
         return this.label;
       }
-      if (this.linkTitle) {
-        return this.linkTitle;
+      if ((_b = this.link) === null || _b === void 0 ? void 0 : _b.title) {
+        return this.link.title;
       }
       return undefined;
     };
@@ -38,15 +40,14 @@ export class Shortcut {
     };
     this.icon = undefined;
     this.label = null;
-    this.linkTitle = null;
     this.disabled = false;
-    this.href = null;
-    this.target = '_self';
     this.badge = undefined;
+    this.link = undefined;
   }
   render() {
+    var _a, _b, _c;
     return [
-      h("a", { "aria-disabled": this.disabled, href: this.href, target: this.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: this.linkTitle }, h("limel-icon", { name: this.icon })),
+      h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, h("limel-icon", { name: this.icon })),
       this.renderLabel(),
       this.renderNotification(),
     ];
@@ -100,24 +101,6 @@ export class Shortcut {
         "reflect": true,
         "defaultValue": "null"
       },
-      "linkTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The `title` tag of the hyperlink, which can be used to\nprovide additional information about the link.\nIt improves accessibility both for sighted users\nand users with assistive technologies."
-        },
-        "attribute": "link-title",
-        "reflect": true,
-        "defaultValue": "null"
-      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -136,58 +119,42 @@ export class Shortcut {
         "reflect": true,
         "defaultValue": "false"
       },
-      "href": {
-        "type": "string",
+      "badge": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The url that the shortcut leads to."
-        },
-        "attribute": "href",
-        "reflect": true,
-        "defaultValue": "null"
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'_self' | '_blank' | '_parent' | '_top'",
-          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Where to load the linked URL, as the name for a browsing context:\n- `_self`: in the current browsing context. (Default)\n- `_blank`: in a new tab.\n- `_parent`: in the parent browsing context of the current one.\nIf no parent, behaves as `_self`.\n- `_top`: the topmost browsing context (the \"highest\" context\nthat's an ancestor of the current one). If no ancestors, behaves as `_self`."
+          "text": "If specified, will display a notification badge\non the shortcut."
         },
-        "attribute": "target",
-        "reflect": true,
-        "defaultValue": "'_self'"
+        "attribute": "badge",
+        "reflect": true
       },
-      "badge": {
-        "type": "any",
+      "link": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "number | string",
-          "resolved": "number | string",
-          "references": {}
+          "original": "Link",
+          "resolved": "Link",
+          "references": {
+            "Link": {
+              "location": "import",
+              "path": "@limetech/lime-elements"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If specified, will display a notification badge\non the shortcut."
-        },
-        "attribute": "badge",
-        "reflect": true
+          "text": "If supplied, the shortcut will be a clickable link."
+        }
       }
     };
   }

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

@@ -4,8 +4,11 @@
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-:host(limel-split-button) {
+:host(limel-split-button.has-menu) {
   --button-padding-right: 2rem;
+}
+
+:host(limel-split-button) {
   display: inline-flex;
   isolation: isolate;
 }
@@ -72,4 +75,10 @@ limel-menu:hover:before, limel-menu:focus-within:before {
 }
 .menu-trigger:not(:disabled):focus-visible, .menu-trigger:not(:disabled):hover {
   background-color: rgb(var(--color-white), 0.1);
+}
+.menu-trigger:before {
+  content: "";
+  position: absolute;
+  inset: -0.25rem;
+  z-index: -1;
 }

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

@@ -17,6 +17,14 @@ import { Host, h } from '@stencil/core';
  */
 export class SplitButton {
   constructor() {
+    this.renderMenu = () => {
+      if (!this.items.length) {
+        return;
+      }
+      return (h("limel-menu", { class: {
+          primary: this.primary,
+        }, disabled: this.disabled, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
+    };
     this.label = undefined;
     this.primary = false;
     this.icon = undefined;
@@ -24,9 +32,9 @@ export class SplitButton {
     this.items = [];
   }
   render() {
-    return (h(Host, null, h("limel-button", { label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled }), h("limel-menu", { class: {
-        primary: this.primary,
-      }, disabled: this.disabled, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE"))));
+    return (h(Host, { class: {
+        'has-menu': !!this.items.length,
+      } }, h("limel-button", { label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled }), this.renderMenu()));
   }
   static get is() { return "limel-split-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/global/shared-types/link.types.js

@@ -0,0 +1 @@
+export {};