@getflip/swirl-components 0.206.0 → 0.207.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-06-11T07:03:41",
2
+ "timestamp": "2024-06-11T11:42:41",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.18.1",
@@ -89,7 +89,7 @@ const SwirlActionList = class {
89
89
  };
90
90
  SwirlActionList.style = SwirlActionListStyle0;
91
91
 
92
- const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
92
+ const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
93
93
  const SwirlActionListItemStyle0 = swirlActionListItemCss;
94
94
 
95
95
  const SwirlActionListItem = class {
@@ -124,6 +124,8 @@ const SwirlActionListItem = class {
124
124
  const icon = this.iconEl?.children[0];
125
125
  const suffix = this.suffixEl?.children[0];
126
126
  icon?.setAttribute("size", smallIcon ? "20" : "24");
127
+ if (suffix?.tagName === "SWIRL-TAG")
128
+ return;
127
129
  suffix?.setAttribute("size", smallIcon ? "20" : "24");
128
130
  }
129
131
  render() {
@@ -131,7 +133,7 @@ const SwirlActionListItem = class {
131
133
  const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
132
134
  const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
133
135
  const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
134
- return (index.h(index.Host, { key: 'c27b5f1bf7f0ba445047c9b6971301dcef1d9e12' }, index.h("button", { key: '1ecb6c1fe6bd6547797b6ae9d8f6ccd728f7053b', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (index.h("span", { key: '1832714c29f2c34a365350542838318b6963ae83', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'b01f38be411e9a4b719ba61b0e18ff64e98a188a', class: "action-list-item__label-container" }, index.h("span", { key: '93351582c31efc909231cd127472984b2bd211d6', class: "action-list-item__label" }, this.label), this.description && (index.h("span", { key: 'f84789e1bc8e39f87ee7d0d608b6482930d55ab0', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: '9c3d72b0dbb8c8b6cd72f850b7e03aeef54b4abe', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: '0ef67d7702bcd9637f0e17405ca6b89af2cb697f', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'f0fda290c8394d13ae778ede1f66b578a8c5475f', name: "suffix" }))))));
136
+ return (index.h(index.Host, { key: '06605ecf01b587dbfb1de890ba776cdb72926c5b' }, index.h("button", { key: 'c70ad0ecbc3e58a6b5c8543c37907346f3301284', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (index.h("span", { key: 'e250cabb8119ad251d4d3d70cd080408f2122d5d', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '28361e8c9cd8696c3661d7263d550a66c87fd26e', class: "action-list-item__label-container" }, index.h("span", { key: 'c8d504ca27d5ba2d1c8979ce45dda984c1e48436', class: "action-list-item__label" }, this.label), this.description && (index.h("span", { key: '303dec5fe699a2c47a4e9e5417d06e3285a30d6f', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: '96c4500b611acc6a1cb40cbb8b6088deffb273b6', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: '739d6e49ad6890a23c1b12eea9037da43c9c9e52', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'a391b536421efd55d4132772d143ec89e757c9d8', name: "suffix" }))))));
135
137
  }
136
138
  get el() { return index.getElement(this); }
137
139
  };