@getflip/swirl-components 0.399.0 → 0.400.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-10-29T08:26:51",
+  "timestamp": "2025-10-30T11:21:46",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.0",
@@ -61026,6 +61026,20 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "clear",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "inputBlur",
           "detail": "FocusEvent",

package/dist/cjs/swirl-card.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DAtJPITi.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlCardCss = ":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);position:relative;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(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--swirl-card-background-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.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--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.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}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(\n    --s-surface-raised-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-raised-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-raised-pressed\n  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.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__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.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)}.card__content{min-height:100%}";
+const swirlCardCss = ":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);position:relative;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(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-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.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--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.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}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(\n    --s-surface-raised-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-raised-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-raised-pressed\n  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.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__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.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)}.card__content{min-height:100%}";
 
 const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlCard = class {

package/dist/cjs/swirl-search.cjs.entry.js

@@ -10,6 +10,7 @@ const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-sea
 const SwirlSearch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.clear = index.createEvent(this, "clear", 7);
         this.inputBlur = index.createEvent(this, "inputBlur", 7);
         this.inputFocus = index.createEvent(this, "inputFocus", 7);
         this.inputInput = index.createEvent(this, "inputInput", 7);
@@ -19,10 +20,11 @@ const SwirlSearch = class {
         this.variant = "filled";
         this.clearable = true;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClear = () => {
             this.input.value = "";
             this.input.focus();
             this.valueChange.emit("");
+            this.clear.emit();
         };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
@@ -68,7 +70,7 @@ const SwirlSearch = class {
         const className = index$1.classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (index.h(index.Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, index.h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
+        return (index.h(index.Host, { key: '7ed53e6408ea37542f8750b1514bb06b571ee922' }, index.h("span", { key: '2ceb66246fc660fc747525126fccf360afe4e6bb', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: 'f5fd26fccfb0e7f50b089ed91d5c6e352e257b02', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '4d5b4f292822f95acd1a22807746fe60becab707', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (index.h("button", { key: '528cc7c7324c3077b076b112a018a6475bc145de', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, index.h("swirl-icon-cancel", { key: '51dd9c1df7cfafb2b00b9dced88650734bf64fca' }))))));
     }
 };
 SwirlSearch.style = swirlSearchCss;

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

@@ -42,10 +42,14 @@ button.card,
 }
 
 a.card:hover, button.card:hover, .card--interactive:hover {
+    --swirl-avatar-background-color: var(--s-surface-raised-hovered);
+
     background-color: var(--swirl-card-background-hovered);
   }
 
 a.card:active, button.card:active, .card--interactive:active {
+    --swirl-avatar-background-color: var(--s-surface-raised-pressed);
+
     background-color: var(--swirl-card-background-pressed);
   }
 

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

@@ -8,10 +8,11 @@ export class SwirlSearch {
         this.variant = "filled";
         this.clearable = true;
         this.mediaQueryUnsubscribe = () => { };
-        this.clear = () => {
+        this.handleClear = () => {
             this.input.value = "";
             this.input.focus();
             this.valueChange.emit("");
+            this.clear.emit();
         };
         this.onBlur = (event) => {
             this.inputBlur.emit(event);
@@ -57,7 +58,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: 'a20b59680e46d8c0db48dc4e4219c9880660d693' }, h("span", { key: '3227a1ae642458cd4d011a6f51e7146ed60e9d90', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '6c7977231b43a3fa04eac25a7b0f6d786cc908bd', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '773474215fde7a49dea748501fd74e99b25934bb', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '24eefaf684a49e976232cb422b3f6fba2fc368cd', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '10c3dda4135ef1555935ee8d4a2dd17fa42d52de' }))))));
+        return (h(Host, { key: '7ed53e6408ea37542f8750b1514bb06b571ee922' }, h("span", { key: '2ceb66246fc660fc747525126fccf360afe4e6bb', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'f5fd26fccfb0e7f50b089ed91d5c6e352e257b02', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4d5b4f292822f95acd1a22807746fe60becab707', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && this.clearable && (h("button", { key: '528cc7c7324c3077b076b112a018a6475bc145de', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.handleClear, type: "button" }, h("swirl-icon-cancel", { key: '51dd9c1df7cfafb2b00b9dced88650734bf64fca' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }
@@ -277,6 +278,21 @@ export class SwirlSearch {
     }
     static get events() {
         return [{
+                "method": "clear",
+                "name": "clear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "inputBlur",
                 "name": "inputBlur",
                 "bubbles": true,