@getflip/swirl-components 0.125.1 → 0.127.0

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

@@ -57,10 +57,20 @@ a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visibl
 
 .card--elevated {
   border-color: transparent;
-  box-shadow: 0 0.75rem 1rem rgba(25, 26, 28, 0.12),
-    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08);
 }
 
+.card--elevated.card--elevation-level-1 {
+    box-shadow: var(--s-shadow-level-1);
+  }
+
+.card--elevated.card--elevation-level-2 {
+    box-shadow: var(--s-shadow-level-2);
+  }
+
+.card--elevated.card--elevation-level-3 {
+    box-shadow: var(--s-shadow-level-3);
+  }
+
 .card--highlighted {
   border-width: 0.1875rem;
   border-color: var(--s-border-highlight);

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

@@ -9,6 +9,7 @@ export class SwirlCard {
     this.as = "div";
     this.borderRadius = "base";
     this.elevated = undefined;
+    this.elevationLevel = 3;
     this.height = undefined;
     this.highlighted = undefined;
     this.href = undefined;
@@ -54,7 +55,7 @@ export class SwirlCard {
         ? `var(--s-space-${this.paddingInlineStart})`
         : undefined,
     };
-    const className = classnames("card", `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
+    const className = classnames("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
       "card--elevated": this.elevated,
       "card--has-image": hasImage,
       "card--highlighted": this.highlighted,
@@ -137,6 +138,29 @@ export class SwirlCard {
         "attribute": "elevated",
         "reflect": false
       },
+      "elevationLevel": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCardElevationLevel",
+          "resolved": "1 | 2 | 3",
+          "references": {
+            "SwirlCardElevationLevel": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-card/swirl-card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "elevation-level",
+        "reflect": false,
+        "defaultValue": "3"
+      },
       "height": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-card/swirl-card.spec.js

@@ -9,7 +9,7 @@ describe("swirl-card", () => {
     expect(page.root).toEqualHtml(`
       <swirl-card as="article" elevated="">
         <mock:shadow-root>
-          <article class="card card--intent-default card--elevated card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
+          <article class="card card--elevation-level-3 card--intent-default card--elevated card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
             <div class="card__image">
               <slot name="image"></slot>
             </div>
@@ -32,7 +32,7 @@ describe("swirl-card", () => {
     expect(page.root).toEqualHtml(`
       <swirl-card href="#" link-target="_blank">
         <mock:shadow-root>
-          <a class="card card--intent-default card--interactive card--justify-content-start" href="#" rel="noreferrer" style="border-radius: var(--s-border-radius-base);" target="_blank">
+          <a class="card card--elevation-level-3 card--intent-default card--interactive card--justify-content-start" href="#" rel="noreferrer" style="border-radius: var(--s-border-radius-base);" target="_blank">
             <div class="card__image">
               <slot name="image"></slot>
             </div>
@@ -55,7 +55,7 @@ describe("swirl-card", () => {
     expect(page.root).toEqualHtml(`
       <swirl-card padding="16" padding-block-start="2" padding-block-end="4" padding-inline-start="8" padding-inline-end="12">
         <mock:shadow-root>
-          <div class="card card--intent-default card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
+          <div class="card card--elevation-level-3 card--intent-default card--justify-content-start" style="border-radius: var(--s-border-radius-base);">
             <div class="card__image">
               <slot name="image"></slot>
             </div>

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -173,6 +173,10 @@
     color: var(--s-text-on-status);
   }
 
+.resource-list-item--wrap-label .resource-list-item__label {
+    white-space: normal;
+  }
+
 .resource-list-item__content {
   --swirl-avatar-group-border-color: var(--s-background-default);
   --swirl-badge-border-color: var(--s-background-default);

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -52,6 +52,7 @@ export class SwirlResourceListItem {
     this.interactive = true;
     this.label = undefined;
     this.labelWeight = "medium";
+    this.labelWrap = undefined;
     this.menuTriggerId = undefined;
     this.menuTriggerLabel = "Options";
     this.meta = undefined;
@@ -134,6 +135,7 @@ export class SwirlResourceListItem {
       "resource-list-item--selectable": this.selectable,
       "resource-list-item--show-control-on-focus": showControlOnFocus,
       "resource-list-item--show-meta": showMeta,
+      "resource-list-item--wrap-label": this.labelWrap,
     });
     return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": this.id, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { class: "resource-list-item__media" }, h("slot", { name: "media" }))), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: this.id, innerHTML: this.label }), this.description && (h("span", { class: "resource-list-item__description", innerHTML: this.description }))), showMeta && (h("span", { class: "resource-list-item__meta" }, h("span", { class: "resource-list-item__meta-text" }, this.meta), h("span", { class: "resource-list-item__badges" }, h("slot", { name: "badges" }))))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), h("span", { class: "resource-list-item__control" }, h("slot", { name: "control" })), showMenu && (h("swirl-popover-trigger", { popover: this.menuTriggerId }, h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { size: this.iconSize })))));
   }
@@ -382,6 +384,23 @@ export class SwirlResourceListItem {
         "reflect": false,
         "defaultValue": "\"medium\""
       },
+      "labelWrap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-wrap",
+        "reflect": false
+      },
       "menuTriggerId": {
         "type": "string",
         "mutable": false,