@getflip/swirl-components 0.514.0 → 0.514.1

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-13T10:40:08",
+  "timestamp": "2026-07-16T09:39:47",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.1",
@@ -95655,10 +95655,10 @@
         },
         {
           "name": "variant",
-          "type": "\"flat\" | \"outline\"",
+          "type": "\"flat\" | \"outline\" | \"translucent\"",
           "complexType": {
             "original": "SwirlToggleGroupVariant",
-            "resolved": "\"flat\" | \"outline\"",
+            "resolved": "\"flat\" | \"outline\" | \"translucent\"",
             "references": {
               "SwirlToggleGroupVariant": {
                 "location": "local",
@@ -95686,6 +95686,10 @@
             {
               "value": "outline",
               "type": "string"
+            },
+            {
+              "value": "translucent",
+              "type": "string"
             }
           ],
           "optional": true,
@@ -98586,7 +98590,7 @@
       "path": "src/components/swirl-toast-provider/swirl-toast-provider.tsx"
     },
     "src/components/swirl-toggle-group/swirl-toggle-group.tsx::SwirlToggleGroupVariant": {
-      "declaration": "export type SwirlToggleGroupVariant = \"flat\" | \"outline\";",
+      "declaration": "export type SwirlToggleGroupVariant = \"flat\" | \"outline\" | \"translucent\";",
       "docstring": "",
       "path": "src/components/swirl-toggle-group/swirl-toggle-group.tsx"
     },

package/dist/cjs/swirl-toggle-button.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlToggleButtonCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}`;
+const swirlToggleButtonCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}`;
 
 const SwirlToggleButton = class {
     constructor(hostRef) {

package/dist/cjs/swirl-toggle-group.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlToggleGroupCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}`;
+const swirlToggleGroupCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.toggle-group--variant-translucent{background-color:var(--s-surface-raised-default)}`;
 
 const SwirlToggleGroup = class {
     constructor(hostRef) {
@@ -62,7 +62,7 @@ const SwirlToggleGroup = class {
         const className = index$1.classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (index.h("swirl-stack", { key: 'd7d63a7cc5ae1b951bb5ecf1a92ae284cfd03ee9', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: 'dab02efe5e0c516088452c64eab6fff4da4111f2', onSlotchange: this.onSlotChange })));
+        return (index.h("swirl-stack", { key: '5fb0cb75b1333d06c6f9878b1ce18e72bac29550', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, index.h("slot", { key: '35700a56766159a8c5ff29b21294d23304da8011', onSlotchange: this.onSlotChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.css

@@ -16,7 +16,7 @@
   border: none;
   border-radius: 0.375rem;
   color: var(--s-text-default);
-  background-color: var(--s-surface-sunken-default);
+  background-color: transparent;
   font: inherit;
   font-weight: var(--s-font-weight-medium);
   line-height: var(--s-line-height-lg);

package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.css

@@ -21,3 +21,7 @@
     outline: var(--s-border-width-default) solid var(--s-border-strong);
     outline-offset: calc(var(--s-border-width-default) * -1);
   }
+
+.toggle-group--variant-translucent {
+    background-color: var(--s-surface-raised-default);
+  }

package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.js

@@ -55,7 +55,7 @@ export class SwirlToggleGroup {
         const className = classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: 'd7d63a7cc5ae1b951bb5ecf1a92ae284cfd03ee9', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'dab02efe5e0c516088452c64eab6fff4da4111f2', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '5fb0cb75b1333d06c6f9878b1ce18e72bac29550', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '35700a56766159a8c5ff29b21294d23304da8011', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }
@@ -95,7 +95,7 @@ export class SwirlToggleGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlToggleGroupVariant",
-                    "resolved": "\"flat\" | \"outline\"",
+                    "resolved": "\"flat\" | \"outline\" | \"translucent\"",
                     "references": {
                         "SwirlToggleGroupVariant": {
                             "location": "local",