@getflip/swirl-components 0.29.0 → 0.30.1

package/dist/collection/components/swirl-carousel-slide/swirl-carousel-slide.js

@@ -1,13 +1,19 @@
 import { h, Host } from "@stencil/core";
+import classnames from "classnames";
 /**
  * slot - The slide contents
  */
 export class SwirlCarouselSlide {
   constructor() {
     this.label = undefined;
+    this.minHeight = undefined;
+    this.width = "15.5rem";
   }
   render() {
-    return (h(Host, { "aria-roledescription": "slide", "aria-label": this.label, class: "carousel-slide", role: "group", tabIndex: 0 }, h("slot", null)));
+    const className = classnames("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight),
+    });
+    return (h(Host, { "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", null)));
   }
   static get is() { return "swirl-carousel-slide"; }
   static get encapsulation() { return "shadow"; }
@@ -31,14 +37,49 @@ export class SwirlCarouselSlide {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "label",
         "reflect": false
+      },
+      "minHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min-height",
+        "reflect": false
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "\"15.5rem\""
       }
     };
   }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-pdf/swirl-file-viewer-pdf.js

@@ -192,11 +192,14 @@ export class SwirlFileViewerPdf {
       transform,
       viewport: viewport,
     };
-    await page.render(renderContext).promise;
-    page.cleanup();
-    textContainer.innerHTML = "";
-    this.renderTextLayer(page, textContainer);
-    this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
+    try {
+      await page.render(renderContext).promise;
+      page.cleanup();
+      textContainer.innerHTML = "";
+      this.renderTextLayer(page, textContainer).catch();
+      this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
+    }
+    catch (e) { }
   }
   destroyPage(page) {
     const container = this.el.shadowRoot.querySelector(`[data-page-number="${page.pageNumber}"]`);

package/dist/collection/components/swirl-heading/swirl-heading.js

@@ -8,6 +8,7 @@ export class SwirlHeading {
     this.balance = true;
     this.headingId = undefined;
     this.level = 1;
+    this.lines = undefined;
     this.text = undefined;
     this.truncate = undefined;
   }
@@ -18,17 +19,26 @@ export class SwirlHeading {
     this.rebalance();
   }
   rebalance() {
-    if (!this.balance || !Boolean(this.headingEl)) {
+    if (!this.balance || !Boolean(this.headingEl) || Boolean(this.lines)) {
       return;
     }
     balanceText(this.headingEl);
   }
   render() {
     const Tag = this.as || `h${this.level}`;
+    const styles = Boolean(this.lines)
+      ? {
+        display: "-webkit-box",
+        overflow: "hidden",
+        "-webkit-line-clamp": String(this.lines),
+        "-webkit-box-orient": "vertical",
+        whiteSpace: "normal",
+      }
+      : undefined;
     const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
       "heading--truncate": this.truncate,
     });
-    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el) }, this.text)));
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el), style: styles }, this.text)));
   }
   static get is() { return "swirl-heading"; }
   static get encapsulation() { return "scoped"; }
@@ -147,6 +157,23 @@ export class SwirlHeading {
         "reflect": false,
         "defaultValue": "1"
       },
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lines",
+        "reflect": false
+      },
       "text": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-text/swirl-text.css

@@ -8,6 +8,7 @@
   }
 
 .text {
+  overflow: hidden;
   margin: 0;
   padding: 0;
 }

package/dist/collection/components/swirl-text/swirl-text.js

@@ -8,6 +8,7 @@ export class SwirlText {
     this.balance = undefined;
     this.color = "default";
     this.fontStyle = "normal";
+    this.lines = undefined;
     this.size = "base";
     this.truncate = undefined;
     this.weight = "normal";
@@ -26,8 +27,16 @@ export class SwirlText {
   }
   render() {
     const Tag = this.as;
+    const styles = Boolean(this.lines)
+      ? {
+        display: "-webkit-box",
+        "-webkit-line-clamp": String(this.lines),
+        "-webkit-box-orient": "vertical",
+        whiteSpace: "normal",
+      }
+      : undefined;
     const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el) }, h("slot", null))));
+    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", null))));
   }
   static get is() { return "swirl-text"; }
   static get encapsulation() { return "scoped"; }
@@ -147,6 +156,23 @@ export class SwirlText {
         "reflect": false,
         "defaultValue": "\"normal\""
       },
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "lines",
+        "reflect": false
+      },
       "size": {
         "type": "string",
         "mutable": false,

package/dist/components/swirl-card.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const swirlCardCss = ":host{display:block}:host *{box-sizing:border-box}.card{display:block;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--elevated{border-color:transparent;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}:not(.card--has-image) .card__image{overflow:hidden;height:0}.content-section{padding:0 var(--s-space-16)}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-direction:column;gap:var(--s-space-16)}";
+const swirlCardCss = ":host{display:block}:host *{box-sizing:border-box}.card{display:block;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--elevated{border-color:transparent;box-shadow:0 0.75rem 1rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}:not(.card--has-image) .card__image{overflow:hidden;height:0}.content-section{padding:0 var(--s-space-16)}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-direction:column;gap:var(--s-space-16)}";
 
 const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -12,6 +12,7 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.as = "div";
     this.borderRadius = "base";
     this.elevated = undefined;
+    this.height = undefined;
     this.highlighted = undefined;
     this.href = undefined;
     this.imageAspectRatio = undefined;
@@ -22,19 +23,21 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const Tag = Boolean(this.href) ? "a" : this.as;
     const hasImage = Boolean(this.el.querySelector('[slot="image"]'));
+    const styles = {
+      borderRadius: swirlCardBorderRadiusTokens.includes(this.borderRadius)
+        ? `var(--s-border-radius-${this.borderRadius})`
+        : this.borderRadius,
+      height: this.height,
+    };
     const className = classnames("card", {
       "card--elevated": this.elevated,
       "card--has-image": hasImage,
       "card--highlighted": this.highlighted,
       "card--interactive": this.interactive || this.href,
     });
-    return (h(Host, null, h(Tag, { "aria-label": this.swirlAriaLabel, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+    return (h(Host, { styles: { height: this.height } }, h(Tag, { "aria-label": this.swirlAriaLabel, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
         ? "noreferrer"
-        : undefined, style: {
-        borderRadius: swirlCardBorderRadiusTokens.includes(this.borderRadius)
-          ? `var(--s-border-radius-${this.borderRadius})`
-          : this.borderRadius,
-      }, target: this.linkTarget }, h("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { name: "image" })), h("div", { class: "card__body" }, h("div", { class: "card__content" }, h("slot", { name: "content" }))))));
+        : undefined, style: styles, target: this.linkTarget }, h("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { name: "image" })), h("div", { class: "card__body" }, h("div", { class: "card__content" }, h("slot", { name: "content" }))))));
   }
   get el() { return this; }
   static get style() { return swirlCardCss; }
@@ -42,6 +45,7 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "as": [1],
     "borderRadius": [1, "border-radius"],
     "elevated": [4],
+    "height": [1],
     "highlighted": [4],
     "href": [1],
     "imageAspectRatio": [1, "image-aspect-ratio"],

package/dist/components/swirl-carousel-slide.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
 
-const swirlCarouselSlideCss = ":host{display:block;padding-left:var(--s-space-16)}:host *{box-sizing:border-box}:host ::slotted(*){width:100%}";
+const swirlCarouselSlideCss = ":host{display:block;min-width:0;padding-left:var(--s-space-16)}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}";
 
 const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -8,13 +9,20 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.__registerHost();
     this.__attachShadow();
     this.label = undefined;
+    this.minHeight = undefined;
+    this.width = "15.5rem";
   }
   render() {
-    return (h(Host, { "aria-roledescription": "slide", "aria-label": this.label, class: "carousel-slide", role: "group", tabIndex: 0 }, h("slot", null)));
+    const className = classnames("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight),
+    });
+    return (h(Host, { "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", null)));
   }
   static get style() { return swirlCarouselSlideCss; }
 }, [1, "swirl-carousel-slide", {
-    "label": [1]
+    "label": [1],
+    "minHeight": [1, "min-height"],
+    "width": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/swirl-carousel.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
-const swirlCarouselCss = ":host{position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel__slides{position:relative;display:flex;overflow-x:auto;width:100%;padding-right:var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){flex-basis:80%;flex-grow:0;flex-shrink:0;scroll-snap-align:start}@media (min-width: 768px){.carousel__slides ::slotted(*){flex-basis:45%}}@media (min-width: 992px){.carousel__slides ::slotted(*){flex-basis:30%}}@media (min-width: 1440px){.carousel__slides ::slotted(*){flex-basis:20%}}.carousel__previous-slide-button{position:absolute;z-index:1;top:50%;left:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}.carousel__next-slide-button{position:absolute;z-index:1;top:50%;right:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}";
+const swirlCarouselCss = ":host{position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before{position:absolute;z-index:1;top:0;left:0;width:var(--s-space-20);height:100%;background:linear-gradient(\n      to right,\n      rgba(var(--swirl-carousel-gradient), 1),\n      rgba(var(--swirl-carousel-gradient), 0)\n    );content:\"\"}.carousel:after{position:absolute;z-index:1;top:0;right:0;width:var(--s-space-20);height:100%;background:linear-gradient(\n      to left,\n      rgba(var(--swirl-carousel-gradient), 1),\n      rgba(var(--swirl-carousel-gradient), 0)\n    );content:\"\"}.carousel__slides{position:relative;display:flex;overflow-x:auto;width:100%;padding:var(--s-space-24) var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button{position:absolute;z-index:1;top:50%;left:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}.carousel__next-slide-button{position:absolute;z-index:1;top:50%;right:var(--s-space-20);transition:opacity 0.2s;transform:translateY(-50%);pointer-events:none;opacity:0}";
 
 const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,6 +18,19 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.nextSlideButtonLabel = "Next slide";
     this.previousSlideButtonLabel = "Previous slide";
     this.loopAround = false;
+    this.isScrollable = undefined;
+  }
+  onWindowResize() {
+    this.checkScrollStatus();
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.checkScrollStatus();
+    });
+  }
+  checkScrollStatus() {
+    this.isScrollable =
+      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
   }
   previousSlide() {
     const slides = this.getSlides();
@@ -51,7 +64,7 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return inInView;
   }
   render() {
-    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", class: "carousel", role: "group" }, h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-left></swirl-icon-arrow-left>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "flat" }), h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-right></swirl-icon-arrow-right>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "flat" }), h("div", { "aria-live": "polite", class: "carousel__slides", ref: (el) => (this.slidesContainer = el) }, h("slot", null))));
+    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-left></swirl-icon-arrow-left>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "flat" })), this.isScrollable && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-right></swirl-icon-arrow-right>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "flat" })), h("div", { "aria-live": "polite", class: "carousel__slides", ref: (el) => (this.slidesContainer = el) }, h("slot", null)))));
   }
   get el() { return this; }
   static get style() { return swirlCarouselCss; }
@@ -59,8 +72,9 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "label": [1],
     "nextSlideButtonLabel": [1, "next-slide-button-label"],
     "previousSlideButtonLabel": [1, "previous-slide-button-label"],
-    "loopAround": [4, "loop-around"]
-  }]);
+    "loopAround": [4, "loop-around"],
+    "isScrollable": [32]
+  }, [[9, "resize", "onWindowResize"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/swirl-file-viewer-pdf2.js

@@ -29703,11 +29703,14 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       transform,
       viewport: viewport,
     };
-    await page.render(renderContext).promise;
-    page.cleanup();
-    textContainer.innerHTML = "";
-    this.renderTextLayer(page, textContainer);
-    this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
+    try {
+      await page.render(renderContext).promise;
+      page.cleanup();
+      textContainer.innerHTML = "";
+      this.renderTextLayer(page, textContainer).catch();
+      this.renderingPageNumbers = this.renderingPageNumbers.filter((pageNumber) => pageNumber !== page.pageNumber);
+    }
+    catch (e) { }
   }
   destroyPage(page) {
     const container = this.el.shadowRoot.querySelector(`[data-page-number="${page.pageNumber}"]`);

package/dist/components/swirl-heading2.js

@@ -13,6 +13,7 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.balance = true;
     this.headingId = undefined;
     this.level = 1;
+    this.lines = undefined;
     this.text = undefined;
     this.truncate = undefined;
   }
@@ -23,17 +24,26 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.rebalance();
   }
   rebalance() {
-    if (!this.balance || !Boolean(this.headingEl)) {
+    if (!this.balance || !Boolean(this.headingEl) || Boolean(this.lines)) {
       return;
     }
     balancetext(this.headingEl);
   }
   render() {
     const Tag = this.as || `h${this.level}`;
+    const styles = Boolean(this.lines)
+      ? {
+        display: "-webkit-box",
+        overflow: "hidden",
+        "-webkit-line-clamp": String(this.lines),
+        "-webkit-box-orient": "vertical",
+        whiteSpace: "normal",
+      }
+      : undefined;
     const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
       "heading--truncate": this.truncate,
     });
-    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el) }, this.text)));
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el), style: styles }, this.text)));
   }
   static get style() { return swirlHeadingCss; }
 }, [2, "swirl-heading", {
@@ -42,6 +52,7 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "balance": [4],
     "headingId": [1, "heading-id"],
     "level": [2],
+    "lines": [2],
     "text": [1],
     "truncate": [4]
   }, [[9, "resize", "onWindowResize"]]]);

package/dist/components/swirl-text2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { b as balancetext } from './balancetext.js';
 
-const swirlTextCss = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
+const swirlTextCss = ".sc-swirl-text-h{display:block;max-width:100%}.sc-swirl-text-h *.sc-swirl-text{box-sizing:border-box}.text.sc-swirl-text{overflow:hidden;margin:0;padding:0}.text--align-start.sc-swirl-text{text-align:start}.text--align-center.sc-swirl-text{text-align:center}.text--align-end.sc-swirl-text{text-align:end}.text--color-default.sc-swirl-text{color:var(--s-text-default)}.text--color-subdued.sc-swirl-text{color:var(--s-text-subdued)}.text--color-critical.sc-swirl-text{color:var(--s-text-critical)}.text--color-success.sc-swirl-text{color:var(--s-text-success)}.text--color-warning.sc-swirl-text{color:var(--s-text-warning)}.text--size-sm.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-base.sc-swirl-text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text--size-lg.sc-swirl-text{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text--weight-normal.sc-swirl-text{font-weight:var(--s-font-weight-normal)}.text--weight-medium.sc-swirl-text{font-weight:var(--s-font-weight-medium)}.text--weight-semibold.sc-swirl-text{font-weight:var(--s-font-weight-semibold)}.text--weight-bold.sc-swirl-text{font-weight:var(--s-font-weight-bold)}.text--font-style-normal.sc-swirl-text{font-style:normal}.text--font-style-italic.sc-swirl-text{font-style:italic}.text--truncate.sc-swirl-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
 const SwirlText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,6 +13,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.balance = undefined;
     this.color = "default";
     this.fontStyle = "normal";
+    this.lines = undefined;
     this.size = "base";
     this.truncate = undefined;
     this.weight = "normal";
@@ -31,8 +32,16 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const Tag = this.as;
+    const styles = Boolean(this.lines)
+      ? {
+        display: "-webkit-box",
+        "-webkit-line-clamp": String(this.lines),
+        "-webkit-box-orient": "vertical",
+        whiteSpace: "normal",
+      }
+      : undefined;
     const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`, { "text--truncate": this.truncate });
-    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el) }, h("slot", null))));
+    return (h(Host, null, h(Tag, { class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", null))));
   }
   get el() { return this; }
   static get style() { return swirlTextCss; }
@@ -42,6 +51,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "balance": [4],
     "color": [1],
     "fontStyle": [1, "font-style"],
+    "lines": [2],
     "size": [1],
     "truncate": [4],
     "weight": [1]