@getflip/swirl-components 0.372.0 → 0.373.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-09-01T12:35:45",
+  "timestamp": "2025-09-01T14:17:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.0",
@@ -60943,10 +60943,10 @@
       "props": [
         {
           "name": "borderColor",
-          "type": "\"default\" | \"highlight\" | \"strong\"",
+          "type": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
           "complexType": {
             "original": "SwirlSeparatorColor",
-            "resolved": "\"default\" | \"highlight\" | \"strong\"",
+            "resolved": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
             "references": {
               "SwirlSeparatorColor": {
                 "location": "local",
@@ -60967,6 +60967,10 @@
           ],
           "default": "\"default\"",
           "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
             {
               "value": "default",
               "type": "string"
@@ -60987,10 +60991,10 @@
         },
         {
           "name": "color",
-          "type": "\"default\" | \"highlight\" | \"strong\"",
+          "type": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
           "complexType": {
             "original": "SwirlSeparatorColor",
-            "resolved": "\"default\" | \"highlight\" | \"strong\"",
+            "resolved": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
             "references": {
               "SwirlSeparatorColor": {
                 "location": "local",
@@ -61011,6 +61015,10 @@
           ],
           "default": "\"default\"",
           "values": [
+            {
+              "value": "critical",
+              "type": "string"
+            },
             {
               "value": "default",
               "type": "string"
@@ -74943,7 +74951,7 @@
       "path": "src/components/swirl-action-list-item/swirl-action-list-item.tsx"
     },
     "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorColor": {
-      "declaration": "export type SwirlSeparatorColor = \"default\" | \"strong\" | \"highlight\";",
+      "declaration": "export type SwirlSeparatorColor =\n  | \"critical\"\n  | \"default\"\n  | \"strong\"\n  | \"highlight\";",
       "docstring": "",
       "path": "src/components/swirl-separator/swirl-separator.tsx"
     },

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

@@ -3,7 +3,7 @@
 var index = require('./index-DM-IG6w2.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlSeparatorCss = ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";
+const swirlSeparatorCss = ":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";
 
 const SwirlSeparator = class {
     constructor(hostRef) {
@@ -33,7 +33,7 @@ const SwirlSeparator = class {
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
         const className = index$1.classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
-        return (index.h(index.Host, { key: '2bb244ed44ae203e950deeacf824108dd5dca113', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, index.h("span", { key: '88d7f7383d3083f70164fb93548835085e15ce20', class: "separator__line" }), this.label && (index.h(index.Fragment, { key: '8f7500a0c14d5bfee5c7cf62839dac69c6587013' }, index.h("span", { key: '4be755e74288cf1f298f8a4c52da1205104c8752', class: "separator__label" }, this.label), index.h("span", { key: '8f2296aa2bb0480a971480618f9765c1a967ea8d', class: "separator__line" })))));
+        return (index.h(index.Host, { key: '17b01a0eecb1f97564885965da64a90967730e14', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, index.h("span", { key: 'e9f7f71c5da01191f232455e8f5e6d9c39131a24', class: "separator__line" }), this.label && (index.h(index.Fragment, { key: '1f9f5c1d0b16766ed8677d7657946c335a5ab8ac' }, index.h("span", { key: 'ae1e1cc3149d5f0be42ea4be999cfda0fcfb6def', class: "separator__label" }, this.label), index.h("span", { key: '029ca069ba60923d67310941f464a92212e4fbd5', class: "separator__line" })))));
     }
 };
 SwirlSeparator.style = swirlSeparatorCss;

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

@@ -21,6 +21,14 @@
       min-height: 1.125rem;
     }
 
+  :host(.separator--color-critical) .separator__line {
+      background-color: var(--s-border-critical);
+    }
+
+  :host(.separator--color-critical) .separator__label {
+      color: var(--s-text-subdued);
+    }
+
   :host(.separator--color-strong) .separator__line {
       background-color: var(--s-border-strong);
     }

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

@@ -27,7 +27,7 @@ export class SwirlSeparator {
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
         const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
-        return (h(Host, { key: '2bb244ed44ae203e950deeacf824108dd5dca113', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: '88d7f7383d3083f70164fb93548835085e15ce20', class: "separator__line" }), this.label && (h(Fragment, { key: '8f7500a0c14d5bfee5c7cf62839dac69c6587013' }, h("span", { key: '4be755e74288cf1f298f8a4c52da1205104c8752', class: "separator__label" }, this.label), h("span", { key: '8f2296aa2bb0480a971480618f9765c1a967ea8d', class: "separator__line" })))));
+        return (h(Host, { key: '17b01a0eecb1f97564885965da64a90967730e14', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'e9f7f71c5da01191f232455e8f5e6d9c39131a24', class: "separator__line" }), this.label && (h(Fragment, { key: '1f9f5c1d0b16766ed8677d7657946c335a5ab8ac' }, h("span", { key: 'ae1e1cc3149d5f0be42ea4be999cfda0fcfb6def', class: "separator__label" }, this.label), h("span", { key: '029ca069ba60923d67310941f464a92212e4fbd5', class: "separator__line" })))));
     }
     static get is() { return "swirl-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +49,7 @@ export class SwirlSeparator {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlSeparatorColor",
-                    "resolved": "\"default\" | \"highlight\" | \"strong\"",
+                    "resolved": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
                     "references": {
                         "SwirlSeparatorColor": {
                             "location": "local",
@@ -75,7 +75,7 @@ export class SwirlSeparator {
                 "mutable": true,
                 "complexType": {
                     "original": "SwirlSeparatorColor",
-                    "resolved": "\"default\" | \"highlight\" | \"strong\"",
+                    "resolved": "\"critical\" | \"default\" | \"highlight\" | \"strong\"",
                     "references": {
                         "SwirlSeparatorColor": {
                             "location": "local",