@getflip/swirl-components 0.192.2 → 0.194.0

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

@@ -14,11 +14,13 @@
   }
 
   :host(.separator--orientation-vertical) .separator__line {
-      display: block;
       width: var(--s-border-width-default);
       height: 100%;
       min-height: 1.125rem;
-      background-color: var(--s-border-default);
+    }
+
+  :host(.separator--border-color-strong) .separator__line {
+      background-color: var(--s-border-strong);
     }
 
 .separator__line {

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlSeparator {
   constructor() {
+    this.borderColor = "default";
     this.orientation = "horizontal";
     this.spacing = "8";
   }
@@ -15,7 +16,7 @@ export class SwirlSeparator {
         paddingRight: `var(--s-space-${this.spacing})`,
         paddingLeft: `var(--s-space-${this.spacing})`,
       };
-    const className = classnames("separator", `separator--orientation-${this.orientation}`);
+    const className = classnames("separator", `separator--border-color-${this.borderColor}`, `separator--orientation-${this.orientation}`);
     return (h(Host, { "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { class: "separator__line" })));
   }
   static get is() { return "swirl-separator"; }
@@ -32,6 +33,29 @@ export class SwirlSeparator {
   }
   static get properties() {
     return {
+      "borderColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSeparatorBorderColor",
+          "resolved": "\"default\" | \"strong\"",
+          "references": {
+            "SwirlSeparatorBorderColor": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-separator/swirl-separator.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "border-color",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "orientation": {
         "type": "string",
         "mutable": false,

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

@@ -7,7 +7,20 @@ describe("swirl-separator", () => {
       html: `<swirl-separator></swirl-separator>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-separator aria-orientation="horizontal" class="separator separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+      <swirl-separator aria-orientation="horizontal" class="separator separator--border-color-default separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
+        <mock:shadow-root>
+          <span class="separator__line"></span>
+        </mock:shadow-root>
+      </swirl-separator>
+    `);
+  });
+  it("renders with strong border color", async () => {
+    const page = await newSpecPage({
+      components: [SwirlSeparator],
+      html: `<swirl-separator border-color="strong"></swirl-separator>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-separator aria-orientation="horizontal" border-color="strong" class="separator separator--border-color-strong separator--orientation-horizontal" role="separator" style="padding-top: var(--s-space-8); padding-bottom: var(--s-space-8);">
         <mock:shadow-root>
           <span class="separator__line"></span>
         </mock:shadow-root>

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

@@ -22,6 +22,12 @@
   gap: var(--s-space-4);
 }
 
+.tag--bordered {
+  border-style: solid;
+  border-width: var(--s-border-width-default);
+  border-color: var(--s-border-strong);
+}
+
 .tag--intent-info {
   color: var(--s-text-info);
   background-color: var(--s-surface-info-subdued);
@@ -31,6 +37,10 @@
     color: var(--icon-info);
   }
 
+.tag--intent-info.tag--bordered {
+    border-color: var(--s-border-info);
+  }
+
 .tag--intent-critical {
   color: var(--s-text-critical);
   background-color: var(--s-surface-critical-subdued);
@@ -40,6 +50,10 @@
     color: var(--icon-critical);
   }
 
+.tag--intent-critical.tag--bordered {
+    border-color: var(--s-border-critical);
+  }
+
 .tag--intent-warning {
   color: var(--s-text-warning);
   background-color: var(--s-surface-warning-subdued);
@@ -49,6 +63,10 @@
     color: var(--icon-warning);
   }
 
+.tag--intent-warning.tag--bordered {
+    border-color: var(--s-border-warning);
+  }
+
 .tag--intent-success {
   color: var(--s-text-success);
   background-color: var(--s-surface-success-subdued);
@@ -58,6 +76,10 @@
     color: var(--icon-success);
   }
 
+.tag--intent-success.tag--bordered {
+    border-color: var(--s-border-success);
+  }
+
 .tag__label {
   overflow: hidden;
   min-width: 0;

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

@@ -8,10 +8,13 @@ export class SwirlTag {
     this.intent = "default";
     this.label = undefined;
     this.removable = undefined;
+    this.bordered = undefined;
     this.removalButtonLabel = "Remove";
   }
   render() {
-    const className = classnames("tag", `tag--intent-${this.intent}`);
+    const className = classnames("tag", `tag--intent-${this.intent}`, {
+      "tag--bordered": this.bordered,
+    });
     return (h(Host, null, h("span", { class: className, part: "tag" }, h("span", { class: "tag__label" }, this.label), this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
   }
   static get is() { return "swirl-tag"; }
@@ -85,6 +88,23 @@ export class SwirlTag {
         "attribute": "removable",
         "reflect": false
       },
+      "bordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bordered",
+        "reflect": false
+      },
       "removalButtonLabel": {
         "type": "string",
         "mutable": false,