@getflip/swirl-components 0.422.0 → 0.423.1

package/dist/collection/components/swirl-table-column/swirl-table-column.js

@@ -1,10 +1,12 @@
 import { h, Host } from "@stencil/core";
+import classNames from "classnames";
 import { closestPassShadow } from "../../utils";
 /**
  * @slot slot - The column label.
  */
 export class SwirlTableColumn {
     constructor() {
+        this.variant = "default";
         this.minWidth = "fit-content";
     }
     componentDidRender() {
@@ -17,7 +19,12 @@ export class SwirlTableColumn {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (h(Host, { key: '7b44381a58a3166a253085ad49e9dfd2c789a6cb', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, h("span", { key: 'bbd36f836c804b7705a4734146d75b0947c60d0e' }, h("slot", { key: '31bd5ea3ad4241e3220982b3b6b09177b1797815' })), this.sortable && (h("span", { key: 'f1412c8cfee58866f449cb188a2def485af9066d', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'bb54544c676dcfb0f13f93354d6438a635fa028d', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'cfb63e3e1edc6c6d99da43eed402b467f3ca7770', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        const variant = this.variant ?? "default";
+        const className = classNames("table-column", {
+            "table-column--default": variant === "default",
+            "table-column--sunken": variant === "sunken",
+        });
+        return (h(Host, { key: '98ff03f03fc2e410ce4f55657bd86d028218f541', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: 'ad2985976912bfb12d87a0372defb67083ef7697' }, h("slot", { key: '66aa14f9abb4ce65efe0d5b3f281faa107586999' })), this.sortable && (h("span", { key: 'c8da76177803b8f1e8f9b64b81558c9c471c5745', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '946a9c5400519b15198313f5d6d5e062361f9383', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '70fa977e67042eba2a943a06f4138a7589932c5b', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     static get is() { return "swirl-table-column"; }
     static get encapsulation() { return "shadow"; }
@@ -33,6 +40,32 @@ export class SwirlTableColumn {
     }
     static get properties() {
         return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlTableColumnVariant",
+                    "resolved": "\"default\" | \"sunken\"",
+                    "references": {
+                        "SwirlTableColumnVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-table-column/swirl-table-column.tsx",
+                            "id": "src/components/swirl-table-column/swirl-table-column.tsx::SwirlTableColumnVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
             "sort": {
                 "type": "string",
                 "attribute": "sort",

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

@@ -106,15 +106,19 @@
 
 .thumbnail__buttons {
   position: absolute;
-  opacity: 0;
   z-index: 1;
   top: var(--s-space-4);
   right: var(--s-space-4);
 }
 
-.thumbnail:hover .thumbnail__buttons {
-    opacity: 1;
+@media (hover: hover) {
+  .thumbnail__buttons {
+    opacity: 0;
   }
+    .thumbnail:hover .thumbnail__buttons {
+      opacity: 1;
+    }
+}
 
 .thumbnail__timestamp {
   position: absolute;