@limetech/lime-elements 37.1.0-next.91 → 37.1.0-next.92

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,223 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.
+*/
+:host(limel-chip) {
+  --limel-chip-height: 1.75rem;
+  --limel-chip-gap: 0.5rem;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.chip {
+  all: unset;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  max-width: var(--chip-max-width, 10rem);
+  height: var(--limel-chip-height);
+  border-radius: var(--limel-chip-height);
+  font-size: 0.875rem;
+  padding: 0 0.125rem;
+}
+.chip:has(limel-icon) .text {
+  padding-left: 0.25rem;
+}
+.chip:not([disabled]) {
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.chip:not([disabled]):focus {
+  outline: none;
+}
+.chip:not([disabled]):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.chip:not([disabled]):hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.chip:not([disabled]):active {
+  background-color: var(--mdc-theme-surface);
+  box-shadow: var(--button-shadow-inset-pressed);
+  transform: translate3d(0, 0.05rem, 0);
+}
+.chip:has(limel-badge) {
+  padding-right: 0.375rem;
+}
+.chip:has(limel-badge) .text {
+  padding-right: 0;
+}
+.chip:has(+ .remove-button:hover) {
+  box-shadow: var(--shadow-depth-8-error);
+}
+
+:host(limel-chip[disabled]) .chip {
+  color: rgba(var(--contrast-1600), 0.37);
+  background-color: rgba(var(--contrast-1600), 0.1);
+  box-shadow: none;
+}
+
+:host(limel-chip[readonly]) .chip {
+  box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);
+}
+
+:host(limel-chip[selected]) .chip {
+  box-shadow: var(--button-shadow-inset);
+}
+:host(limel-chip[selected]) .chip:focus-visible {
+  box-shadow: var(--button-shadow-inset), var(--shadow-depth-8-focused);
+}
+:host(limel-chip[selected]) .chip:active {
+  box-shadow: var(--button-shadow-inset-pressed);
+}
+:host(limel-chip[selected]) .text {
+  color: var(--mdc-theme-primary);
+}
+
+:host(limel-chip[removable]) .chip:not([disabled]) {
+  padding-right: calc(var(--limel-chip-height) + 0.125rem);
+}
+:host(limel-chip[removable]) .chip:not([disabled]) .text {
+  padding-right: 0;
+}
+
+:host(limel-chip[type=filter]) .chip {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+:host(limel-chip[type=filter]) .chip:after {
+  content: "";
+  transition: background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;
+  box-sizing: border-box;
+  position: absolute;
+  bottom: 0.125rem;
+  left: 0.125rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: rgb(var(--contrast-800), 0.8);
+  box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;
+}
+
+:host(limel-chip[type=filter][selected]) .chip:after {
+  background-color: rgb(var(--color-green-default));
+  box-shadow: 0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset;
+}
+
+limel-icon {
+  flex-shrink: 0;
+  width: calc(var(--limel-chip-height) - 0.25rem);
+  height: calc(var(--limel-chip-height) - 0.25rem);
+  padding: 0.0625rem;
+}
+
+limel-badge {
+  pointer-events: none;
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  padding: 0 0.5rem;
+}
+
+.trailing-button {
+  all: unset;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);
+  margin-right: 0.125rem;
+  width: calc(var(--limel-chip-height) - 0.25rem);
+  height: calc(var(--limel-chip-height) - 0.25rem);
+  border-radius: 50%;
+}
+.trailing-button:hover {
+  color: rgb(var(--color-red-dark));
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.trailing-button:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.trailing-button svg {
+  transition: color 0.2s ease, transform 0.2s ease;
+  width: 1.25rem;
+}
+.trailing-button:hover svg {
+  transform: scale(0.8);
+}

package/dist/collection/components/chip/chip.js

@@ -0,0 +1,357 @@
+import { h, Host, } from '@stencil/core';
+import { getIconName } from '../icon/get-icon-props';
+import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
+import translate from '../../global/translations';
+import { BACKSPACE, BACKSPACE_KEY_CODE, DELETE, DELETE_KEY_CODE, } from '../../util/keycodes';
+/**
+ * Chips and buttons are both interactive elements in UI design,
+ * but they serve different purposes and are used in different contexts.
+ *
+ * :::warning
+ * Do not use the chip component carelessly, as an alternative for
+ * [`limel-button`](#/component/limel-button/) in the UI design!
+ *
+ * **Buttons:**
+ * Buttons are used to trigger actions. They are typically used to
+ * submit forms, open dialogs, initiate a process, or perform any action
+ * that changes the state of the application.
+ * Buttons' labels usually contain action words, in other words, the labels is
+ * a _verb in imperative mood_ such as "Submit" or "Delete".
+ * Buttons are placed in areas where it's clear they will initiate
+ * an action when clicked.
+ *
+ * **Chips:**
+ * Chips however are elements which may look like buttons, but they are
+ * representing choices, filters, or tags, in a small block
+ * or clearly bundled into a group. Chips are rarely used alone in the
+ * user interface.
+ * They are often used in a so called "chip-set", or placed together in
+ * a section of the UI, where the user can expect more than one chip to be present.
+ *
+ * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
+ * or an item in a shopping list.
+ * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
+ * or opening a page with all posts tagged with the tag represented by the chip,
+ * or navigating to a page with more information about the item in the shopping list.
+ * :::
+ *
+ * @private
+ * @exampleComponent limel-example-chip-button
+ * @exampleComponent limel-example-chip-link
+ * @exampleComponent limel-example-chip-icon-colors
+ * @exampleComponent limel-example-chip-badge
+ * @exampleComponent limel-example-chip-filter
+ * @exampleComponent limel-example-chip-removable
+ * @exampleComponent limel-example-chip-aria-role
+ */
+export class Chip {
+  constructor() {
+    this.renderAsButton = () => {
+      return [
+        h("button", { class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
+        this.renderRemoveButton(),
+      ];
+    };
+    this.renderAsLink = () => {
+      return [
+        h("a", { class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
+        this.renderRemoveButton(),
+      ];
+    };
+    this.renderLabel = () => {
+      return h("span", { class: "text" }, this.text);
+    };
+    this.filterClickWhenDisabled = (e) => {
+      if (this.disabled || this.readonly) {
+        e.preventDefault();
+      }
+    };
+    this.handleRemoveClick = (event) => {
+      event.stopPropagation();
+      this.remove.emit();
+    };
+    this.handleDeleteKeyDown = (event) => {
+      if (!this.removable) {
+        return;
+      }
+      const keys = [DELETE, BACKSPACE];
+      const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];
+      if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {
+        this.handleRemoveClick(event);
+      }
+    };
+    this.removeChipLabel = () => {
+      return translate.get('chip-set.remove-chip', this.language);
+    };
+    this.language = 'en';
+    this.text = undefined;
+    this.icon = undefined;
+    this.link = undefined;
+    this.badge = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.selected = false;
+    this.removable = false;
+    this.type = undefined;
+  }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
+  render() {
+    return (h(Host, { onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
+  }
+  renderIcon() {
+    var _a, _b;
+    const icon = getIconName(this.icon);
+    if (!icon) {
+      return;
+    }
+    return (h("limel-icon", { badge: true, name: icon, style: {
+        color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
+        'background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
+      } }));
+  }
+  renderBadge() {
+    if (!this.badge) {
+      return;
+    }
+    return h("limel-badge", { label: this.badge });
+  }
+  renderRemoveButton() {
+    if (!this.removable || this.readonly || this.disabled) {
+      return;
+    }
+    const svgData = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';
+    return (h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, innerHTML: svgData, onClick: this.handleRemoveClick }));
+  }
+  static get is() { return "limel-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Languages",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "references": {
+            "Languages": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the language for translations.\nWill translate the translatable strings on the components."
+        },
+        "attribute": "language",
+        "reflect": true,
+        "defaultValue": "'en'"
+      },
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label displayed on the chip"
+        },
+        "attribute": "text",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Icon",
+          "resolved": "Icon | string",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon of the chip."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "link": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Omit<Link, 'text'>",
+          "resolved": "{ title?: string; target?: string; href: string; }",
+          "references": {
+            "Omit": {
+              "location": "global"
+            },
+            "Link": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If supplied, the chip will become a clickable link."
+        }
+      },
+      "badge": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the badge, displayed on the chip."
+        },
+        "attribute": "badge",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the chip."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to render the chip as a static UI element.\nUseful when the parent component has a `readonly` state."
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to visualize the chip in a \"selected\" state.\nThis is typically used when the chip is used in a chip-set\nalong with other chips."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "removable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to render a remove button on the chip."
+        },
+        "attribute": "removable",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'filter'",
+          "resolved": "\"filter\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `filter` to render the chip with a distinct style\nsuitable for visualizing filters."
+        },
+        "attribute": "type",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "remove",
+        "name": "remove",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when clicking on the remove button of a `removable` chip."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=chip.js.map

package/dist/collection/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EACH,SAAS,EACT,kBAAkB,EAClB,MAAM,EACN,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAO7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAMH,MAAM,OAAO,IAAI;;IA2FL,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO;QACH,cACI,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACd;QACT,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MACxB,OAAO;QACH,SACI,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACpB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,mBACT,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACnB;QACJ,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACjD,CAAC,CAAC;IAkDM,4BAAuB,GAAG,CAAC,CAAC,EAAE,EAAE;MACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;IACL,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAiC,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;MACjC,MAAM,QAAQ,GAAG,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;MAEvD,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;QAC9D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;OACjC;IACL,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAW,EAAE;MACnC,OAAO,SAAS,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;oBAtM2B,IAAI;;;;;oBA8Bf,KAAK;oBAOL,KAAK;oBAQL,KAAK;qBAMJ,KAAK;;;EAkBjB,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CACrD,CACV,CAAC;EACN,CAAC;EAyCO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,CACH,kBACI,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;QACtC,kBAAkB,EAAE,GAChB,MAAC,IAAI,CAAC,IAAa,0CAAE,eACzB,EAAE;OACL,GACH,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EAC9C,CAAC;EAEO,kBAAkB;IACtB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnD,OAAO;KACV;IAED,MAAM,OAAO,GACT,uJAAuJ,CAAC;IAE5J,OAAO,CACH,cACI,KAAK,EAAC,+BAA+B,EACrC,QAAQ,EAAE,CAAC,CAAC,gBACA,IAAI,CAAC,eAAe,EAChC,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GACjC,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BJ","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: true,\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon: string | Icon;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     */\n    @Prop({ reflect: true })\n    public type: 'filter';\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     */\n    @Event()\n    public remove: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </button>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </a>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (!this.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit();\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n}\n"]}

package/dist/collection/components/header/header.css

@@ -110,13 +110,13 @@
 
 .heading {
   color: var(--header-heading-color, rgb(var(--contrast-1100)));
-  font-size: 1.0625rem;
+  font-size: 1rem;
   font-weight: 500;
 }
 
 .subheading {
   color: var(--header-subheading-color, rgb(var(--contrast-900)));
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 400;
 }
 
@@ -124,8 +124,7 @@
   color: var(--header-supporting-text-color, var(--header-subheading-color));
 }
 .subheading__supporting-text span {
-  margin: 0 0.5rem;
-  font-weight: bold;
+  margin: 0 0.125rem;
 }
 
 slot[name=actions] {

package/dist/collection/components/header/header.js

@@ -57,6 +57,7 @@ export class Header {
     this.heading = undefined;
     this.subheading = undefined;
     this.supportingText = undefined;
+    this.subheadingDivider = '·';
   }
   render() {
     return [
@@ -75,7 +76,7 @@ export class Header {
     if (!this.supportingText) {
       return;
     }
-    return (h("span", { class: "information__headings__subheading__supporting-text" }, h("span", null, "\u00B7"), " ", this.supportingText));
+    return (h("span", { class: "subheading__supporting-text" }, h("span", null, this.subheadingDivider), this.supportingText));
   }
   static get is() { return "limel-header"; }
   static get encapsulation() { return "shadow"; }
@@ -163,6 +164,24 @@ export class Header {
         },
         "attribute": "supporting-text",
         "reflect": false
+      },
+      "subheadingDivider": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The visual divider that separates the `subheading` and the `supportingText`.\nIt must be a single character such as `-` or `,`."
+        },
+        "attribute": "subheading-divider",
+        "reflect": false,
+        "defaultValue": "'\u00B7'"
       }
     };
   }