@getflip/swirl-components 0.34.2 → 0.35.0

package/dist/types/components/swirl-card/swirl-card.d.ts

@@ -1,6 +1,7 @@
 declare const swirlCardBorderRadiusTokens: readonly ["xs", "sm", "base", "l", "xl"];
 export type SwirlCardBorderRadius = typeof swirlCardBorderRadiusTokens[number] | string;
 export type SwirlCardJustifyContent = "start" | "center" | "end";
+export type SwirlCardPadding = "0" | "2" | "4" | "8" | "12" | "16" | "20" | "24" | "32";
 /**
  * @slot slot - The card contents
  */
@@ -17,6 +18,11 @@ export declare class SwirlCard {
   interactive?: boolean;
   justifyContent?: SwirlCardJustifyContent;
   linkTarget?: string;
+  padding?: SwirlCardPadding;
+  paddingBlockEnd?: SwirlCardPadding;
+  paddingBlockStart?: SwirlCardPadding;
+  paddingInlineEnd?: SwirlCardPadding;
+  paddingInlineStart?: SwirlCardPadding;
   swirlAriaLabel?: string;
   render(): any;
 }

package/dist/types/components/swirl-text/swirl-text.d.ts

@@ -17,6 +17,7 @@ export declare class SwirlText {
   private textEl;
   componentDidRender(): void;
   onWindowResize(): void;
+  private handleTruncation;
   private rebalance;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./compo
 import { SwirlBoxOverflow, SwirlBoxPadding } from "./components/swirl-box/swirl-box";
 import { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 import { SwirlButtonGroupOrientation } from "./components/swirl-button-group/swirl-button-group";
-import { SwirlCardBorderRadius, SwirlCardJustifyContent } from "./components/swirl-card/swirl-card";
+import { SwirlCardBorderRadius, SwirlCardJustifyContent, SwirlCardPadding } from "./components/swirl-card/swirl-card";
 import { SwirlCheckboxState } from "./components/swirl-checkbox/swirl-checkbox";
 import { SwirlChipIntent, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
@@ -59,7 +59,7 @@ export { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./compo
 export { SwirlBoxOverflow, SwirlBoxPadding } from "./components/swirl-box/swirl-box";
 export { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 export { SwirlButtonGroupOrientation } from "./components/swirl-button-group/swirl-button-group";
-export { SwirlCardBorderRadius, SwirlCardJustifyContent } from "./components/swirl-card/swirl-card";
+export { SwirlCardBorderRadius, SwirlCardJustifyContent, SwirlCardPadding } from "./components/swirl-card/swirl-card";
 export { SwirlCheckboxState } from "./components/swirl-checkbox/swirl-checkbox";
 export { SwirlChipIntent, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
@@ -252,6 +252,11 @@ export namespace Components {
         "isBorderless"?: boolean;
         "justifyContent"?: SwirlCardJustifyContent;
         "linkTarget"?: string;
+        "padding"?: SwirlCardPadding;
+        "paddingBlockEnd"?: SwirlCardPadding;
+        "paddingBlockStart"?: SwirlCardPadding;
+        "paddingInlineEnd"?: SwirlCardPadding;
+        "paddingInlineStart"?: SwirlCardPadding;
         "swirlAriaLabel"?: string;
     }
     /**
@@ -2815,6 +2820,11 @@ declare namespace LocalJSX {
         "isBorderless"?: boolean;
         "justifyContent"?: SwirlCardJustifyContent;
         "linkTarget"?: string;
+        "padding"?: SwirlCardPadding;
+        "paddingBlockEnd"?: SwirlCardPadding;
+        "paddingBlockStart"?: SwirlCardPadding;
+        "paddingInlineEnd"?: SwirlCardPadding;
+        "paddingInlineStart"?: SwirlCardPadding;
         "swirlAriaLabel"?: string;
     }
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -55,6 +55,7 @@
     "maska": "^1.5.0",
     "papaparse": "^5.3.2",
     "pdfjs-dist": "^2.16.105",
+    "shave": "^5.0.2",
     "sortablejs": "^1.15.0",
     "wc-datepicker": "^0.5.1"
   },

package/vscode-data.json

@@ -862,6 +862,171 @@
           "name": "link-target",
           "description": ""
         },
+        {
+          "name": "padding",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-block-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-block-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
         {
           "name": "swirl-aria-label",
           "description": ""

package/dist/swirl-components/p-0f186daa.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as s,g as i}from"./p-05c15d47.js";import{c as r}from"./p-b7898321.js";import{b as l}from"./p-f83a5757.js";const o=class{constructor(e){t(this,e),this.align="start",this.as="p",this.balance=void 0,this.color="default",this.fontStyle="normal",this.lines=void 0,this.size="base",this.truncate=void 0,this.weight="normal"}componentDidRender(){this.rebalance()}onWindowResize(){this.rebalance()}rebalance(){this.balance&&Boolean(this.textEl)&&l(this.textEl)}render(){const t=this.as,i=Boolean(this.lines)?{display:"-webkit-box","-webkit-line-clamp":String(this.lines),"-webkit-box-orient":"vertical",whiteSpace:"normal"}:void 0,l=r("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 e(s,null,e(t,{class:l,ref:t=>this.textEl=t,style:i},e("slot",null)))}get el(){return i(this)}};o.style=".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}";export{o as swirl_text}

package/dist/swirl-components/p-80610550.entry.js

@@ -1 +0,0 @@
-import{r,h as e,H as t,g as i}from"./p-05c15d47.js";import{c as a}from"./p-b7898321.js";const s=["xs","sm","base","l","xl"],o=class{constructor(e){r(this,e),this.as="div",this.borderRadius="base",this.elevated=void 0,this.height=void 0,this.highlighted=void 0,this.href=void 0,this.imageAspectRatio=void 0,this.isBorderless=void 0,this.interactive=void 0,this.justifyContent="start",this.linkTarget=void 0,this.swirlAriaLabel=void 0}render(){const r=Boolean(this.href)?"a":this.as,i=Boolean(this.el.querySelector('[slot="image"]')),o={borderRadius:s.includes(this.borderRadius)?`var(--s-border-radius-${this.borderRadius})`:this.borderRadius,height:this.height},d=a("card",`card--justify-content-${this.justifyContent}`,{"card--elevated":this.elevated,"card--has-image":i,"card--highlighted":this.highlighted,"card--interactive":this.interactive||this.href,"card--is--borderless":this.isBorderless});return e(t,{styles:{height:this.height}},e(r,{"aria-label":this.swirlAriaLabel,class:d,href:this.href,rel:Boolean(this.href)&&"_blank"===this.linkTarget?"noreferrer":void 0,style:o,target:this.linkTarget},e("div",{class:"card__image",style:{aspectRatio:this.imageAspectRatio}},e("slot",{name:"image"})),e("div",{class:"card__body"},e("div",{class:"card__content"},e("slot",{name:"content"})))))}get el(){return i(this)}};o.style=":host{display:block}:host *{box-sizing:border-box}.card{display:flex;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;flex-direction:column}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--is--borderless{border:0}.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)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}:not(.card--has-image) .card__image{overflow:hidden;height:0}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}";export{o as swirl_card}