@haiilo/catalyst 1.1.0 → 1.1.1

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

@@ -1,4 +1,5 @@
-import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { setAttributeDefault, setPropertyDefault } from '../../utils/setDefault';
 /**
  * Informs user about important changes or conditions in the interface. Use this
  * component if you need to capture user’s attention in a prominent way.
@@ -28,18 +29,17 @@ export class CatAlert {
      */
     this.noIcon = false;
   }
+  connectedCallback() {
+    setAttributeDefault(this, 'tabindex', 0);
+    setAttributeDefault(this, 'role', this.mapRole.get(this.color));
+    setPropertyDefault(this, 'color');
+  }
   render() {
-    return (h(Host, { tabindex: this.tabIndex, role: this.role },
+    return (h(Host, null,
       !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }),
       h("div", { class: "content" },
         h("slot", null))));
   }
-  get tabIndex() {
-    return this.hostElement.getAttribute('tabindex') || '0';
-  }
-  get role() {
-    return this.hostElement.getAttribute('role') || this.mapRole.get(this.color) || null;
-  }
   static get is() { return "cat-alert"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/cat-alert/cat-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-alert.js","sourceRoot":"","sources":["../../../src/components/cat-alert/cat-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IAIH;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAOtF;;OAEG;IACK,WAAM,GAAG,KAAK,CAAC;GAoBxB;EAlBC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAC3C,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa;MAC3G,WAAK,KAAK,EAAC,SAAS;QAClB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC;EAC1D,CAAC;EAED,IAAY,IAAI;IACd,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;EACvF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  render() {\n    return (\n      <Host tabindex={this.tabIndex} role={this.role}>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get tabIndex() {\n    return this.hostElement.getAttribute('tabindex') || '0';\n  }\n\n  private get role() {\n    return this.hostElement.getAttribute('role') || this.mapRole.get(this.color) || null;\n  }\n}\n"]}
+{"version":3,"file":"cat-alert.js","sourceRoot":"","sources":["../../../src/components/cat-alert/cat-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEjF;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IAIH;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAOtF;;OAEG;IACK,WAAM,GAAG,KAAK,CAAC;GAkBxB;EAhBC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;EACpC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa;MAC3G,WAAK,KAAK,EAAC,SAAS;QAClB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault, setPropertyDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n    setPropertyDefault(this, 'color');\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cat-avatar/cat-avatar.css

@@ -10,13 +10,7 @@
    * @prop --cat-avatar-size: The size of the avatar.
    * @prop --cat-avatar-font-size: The font size of the avatar.
    */
-  display: inline-block;
-  vertical-align: middle;
-  /* stylelint-disable property-no-vendor-prefix */
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* stylelint-enable property-no-vendor-prefix */
+  display: contents;
 }
 
 :host([hidden]) {
@@ -24,7 +18,7 @@
 }
 
 .avatar {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.25rem;
@@ -35,6 +29,12 @@
   background-position: center;
   white-space: nowrap;
   overflow: hidden;
+  vertical-align: middle;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .avatar:focus-visible {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));

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

@@ -3,28 +3,21 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
-:host {
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: baseline;
-}
-
 :host([hidden]) {
   display: none;
 }
 
-.badge {
-  font: inherit;
+:host {
   display: inline-flex;
+  max-width: 100%;
+  vertical-align: baseline;
   align-items: center;
   justify-content: center;
   border-radius: 0.125rem;
   text-decoration: none;
-  box-sizing: border-box;
-  width: 100%;
   line-height: 1;
 }
-.badge slot {
+:host slot {
   display: inline-block;
   /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
   overflow: hidden;
@@ -33,11 +26,11 @@
   /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
 }
 
-.badge-round {
+:host([round]) {
   border-radius: 10rem;
 }
 
-.badge-filled {
+:host([variant=filled]) {
   background-color: rgb(var(--bg));
   color: rgb(var(--fill));
   font-weight: 600;
@@ -45,86 +38,87 @@
   -moz-osx-font-smoothing: greyscale;
 }
 
-.badge-outlined {
+:host([variant=outlined]) {
   background-color: white;
   box-shadow: inset 0 0 0 1px rgba(var(--border), 0.2);
   color: rgb(var(--text));
 }
 
-.badge-primary {
+:host([color=primary]) {
   --bg: var(--cat-primary-bg, 32, 127, 138);
   --fill: var(--cat-primary-fill, 255, 255, 255);
   --text: var(--cat-primary-text, 32, 127, 138);
   --border: var(--cat-primary-text, 32, 127, 138);
 }
 
-.badge-secondary {
+:host([color=secondary]) {
   --bg: 105, 118, 135;
   --fill: 255, 255, 255;
   --text: 0, 0, 0;
   --border: 105, 118, 135;
 }
 
-.badge-success {
+:host([color=success]) {
   --bg: 0, 132, 88;
   --fill: 255, 255, 255;
   --text: 0, 132, 88;
   --border: 0, 132, 88;
 }
 
-.badge-warning {
+:host([color=warning]) {
   --bg: 255, 206, 128;
   --fill: 0, 0, 0;
   --text: 159, 97, 0;
   --border: 159, 97, 0;
 }
 
-.badge-danger {
+:host([color=danger]) {
   --bg: 217, 52, 13;
   --fill: 255, 255, 255;
   --text: 217, 52, 13;
   --border: 217, 52, 13;
 }
 
-.badge-xs {
+:host([size=xs]) {
   height: 1rem;
   min-width: 1rem;
   font-size: 0.75rem;
   padding: 0 0.25rem;
 }
 
-.badge-s {
+:host([size=s]) {
   height: 1.5rem;
   min-width: 1.5rem;
   font-size: 0.75rem;
   padding: 0 0.5rem;
 }
 
-.badge-m {
+:host([size=m]) {
   height: 2rem;
   min-width: 2rem;
   font-size: 0.875rem;
   padding: 0 0.75rem;
 }
 
-.badge-l {
+:host([size=l]) {
   height: 2.5rem;
   min-width: 2.5rem;
   font-size: 0.9375rem;
   padding: 0 1rem;
 }
 
-.badge-xl {
+:host([size=xl]) {
   height: 3rem;
   min-width: 3rem;
   font-size: 1.125rem;
   padding: 0 1rem;
 }
 
-.badge-pulse.badge-filled {
+:host([pulse][variant=filled]) {
   animation: 1.5s ease 0s infinite normal none running pulse;
 }
-.badge-pulse.badge-outlined {
+
+:host([pulse][variant=outlined]) {
   animation: 1.5s ease 0s infinite normal none running pulse-outlined;
 }
 

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

@@ -1,9 +1,8 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, Element, h, Prop } from '@stencil/core';
+import { setPropertyDefault } from '../../utils/setDefault';
 /**
  * Badges are used to inform users of the status of an object or of an action
  * that’s been taken.
- *
- * @part badge - The badge element.
  */
 export class CatBadge {
   constructor() {
@@ -28,16 +27,13 @@ export class CatBadge {
      */
     this.pulse = false;
   }
+  connectedCallback() {
+    setPropertyDefault(this, 'variant');
+    setPropertyDefault(this, 'color');
+    setPropertyDefault(this, 'size');
+  }
   render() {
-    return (h("span", { part: "badge", class: {
-        badge: true,
-        'badge-round': this.round,
-        'badge-pulse': this.pulse,
-        [`badge-${this.variant}`]: Boolean(this.variant),
-        [`badge-${this.color}`]: Boolean(this.color),
-        [`badge-${this.size}`]: Boolean(this.size)
-      } },
-      h("slot", null)));
+    return h("slot", null);
   }
   static get is() { return "cat-badge"; }
   static get encapsulation() { return "shadow"; }
@@ -139,5 +135,6 @@ export class CatBadge {
       "defaultValue": "false"
     }
   }; }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=cat-badge.js.map

package/dist/collection/components/cat-badge/cat-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAME;;OAEG;IACK,YAAO,GAA0B,QAAQ,CAAC;IAElD;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAEtF;;OAEG;IACK,SAAI,GAAkC,GAAG,CAAC;IAElD;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;IAEtB;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,OAAO,CACL,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C;MAED,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n *\n * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAQE;;OAEG;IACK,YAAO,GAA0B,QAAQ,CAAC;IAElD;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAEtF;;OAEG;IACK,SAAI,GAAkC,GAAG,CAAC;IAElD;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;IAEtB;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;GAWvB;EATC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { setPropertyDefault } from '../../utils/setDefault';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  connectedCallback() {\n    setPropertyDefault(this, 'variant');\n    setPropertyDefault(this, 'color');\n    setPropertyDefault(this, 'size');\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

package/dist/collection/components/cat-card/cat-card.js

@@ -1,12 +1,11 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * Cards are surfaces that display content and actions on a single topic. They
  * should be easy to scan for relevant and actionable information.
  */
 export class CatCard {
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return h("slot", null);
   }
   static get is() { return "cat-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/cat-card/cat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-card.js","sourceRoot":"","sources":["../../../src/components/cat-card/cat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,OAAO;EAClB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-card.js","sourceRoot":"","sources":["../../../src/components/cat-card/cat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;GAGG;AAMH,MAAM,OAAO,OAAO;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

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

@@ -134,6 +134,7 @@ label.hidden {
 .pill > span {
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1 1 0%;
 }
 .pill > cat-button {
   margin-right: -0.25rem;
@@ -193,6 +194,10 @@ cat-spinner {
   --cat-avatar-size: 1.25rem;
 }
 
+.select-option-text {
+  flex: 1 1 0%;
+}
+
 .select-option-single {
   cursor: pointer;
 }

package/dist/collection/components/cat-select/cat-select.js

@@ -182,6 +182,11 @@ export class CatSelect {
         if (this.state.activeSelectionIndex >= 0) {
           this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
         }
+        else if (this.state.selection.length) {
+          const selectionClone = [...this.state.selection];
+          selectionClone.pop();
+          this.patchState({ selection: selectionClone });
+        }
       }
     }
     else if (event.key === 'Tab') {
@@ -236,7 +241,7 @@ export class CatSelect {
       .subscribe(items => {
       var _a;
       const options = items === null || items === void 0 ? void 0 : items.map(item => ({
-        item,
+        item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
         render: this.connectorSafe.render(item)
       }));
       if (this.tags &&