@getflip/swirl-components 0.88.1 → 0.90.0

package/dist/collection/collection-manifest.json

@@ -48,6 +48,7 @@
     "./components/swirl-thumbnail/swirl-thumbnail.js",
     "./components/swirl-toast/swirl-toast.js",
     "./components/swirl-toast-provider/swirl-toast-provider.js",
+    "./components/swirl-toolbar/swirl-toolbar.js",
     "./components/swirl-tooltip/swirl-tooltip.js",
     "./components/swirl-action-list/swirl-action-list.js",
     "./components/swirl-action-list-section/swirl-action-list-section.js",

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

@@ -17,6 +17,39 @@
       0 0 0 0.1875rem var(--s-focus-default);
   }
 
+.checkbox--variant-card {
+  width: 100%;
+  padding: var(--s-space-16);
+  border: 0.0625rem solid var(--s-border-default);
+  border-radius: var(--s-border-radius-sm);
+  background-color: var(--s-surface);
+}
+
+.checkbox--variant-card:focus-within {
+    box-shadow: 0 0 0 0.125rem var(--s-background-default),
+      0 0 0 0.25rem var(--s-focus-default);
+  }
+
+.checkbox--variant-card:focus-within .checkbox__box {
+      box-shadow: none;
+    }
+
+.checkbox--variant-card:hover:not(.checkbox--disabled) {
+    background-color: var(--s-surface-hovered);
+  }
+
+.checkbox--variant-card:active:not(.checkbox--disabled) {
+    background-color: var(--s-surface-pressed);
+  }
+
+.checkbox--variant-card.checkbox--checked:not(.checkbox--disabled) {
+    border-color: var(--s-border-highlight);
+  }
+
+.checkbox--variant-card.checkbox--invalid:not(.checkbox--disabled) {
+    border-color: var(--s-border-critical);
+  }
+
 .checkbox--checked .checkbox__control:hover .checkbox__box, .checkbox--indeterminate .checkbox__control:hover .checkbox__box {
         border-color: var(--s-interactive-primary-hovered);
         background-color: var(--s-interactive-primary-hovered);

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

@@ -18,6 +18,7 @@ export class SwirlCheckbox {
     this.label = undefined;
     this.labelWeight = "medium";
     this.value = undefined;
+    this.variant = "default";
   }
   getAriaCheckedLabel(checked, unchecked) {
     if (checked) {
@@ -37,14 +38,14 @@ export class SwirlCheckbox {
     const ariaInvalid = this.invalid === true || this.invalid === false
       ? String(this.invalid)
       : undefined;
-    const className = classnames("checkbox", `checkbox--label-weight-${this.labelWeight}`, {
+    const className = classnames("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
       "checkbox--checked": checked,
       "checkbox--disabled": this.disabled,
       "checkbox--indeterminate": indeterminate,
       "checkbox--invalid": this.invalid,
       "checkbox--unchecked": unchecked,
     });
-    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description)))))));
+    return (h(Host, { style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description)))))));
   }
   static get is() { return "swirl-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -259,6 +260,29 @@ export class SwirlCheckbox {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlCheckboxVariant",
+          "resolved": "\"card\" | \"default\"",
+          "references": {
+            "SwirlCheckboxVariant": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-checkbox/swirl-checkbox.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -8,7 +8,7 @@ describe("swirl-checkbox", () => {
     });
     expect(page.root).toMatchInlineSnapshot(`
       <swirl-checkbox checked="true" description="Description" disabled="true" input-id="checkbox" input-name="checkbox" label="Label" value="Value">
-        <label class="checkbox checkbox--checked checkbox--disabled checkbox--label-weight-medium" htmlfor="checkbox">
+        <label class="checkbox checkbox--checked checkbox--disabled checkbox--label-weight-medium checkbox--variant-default" htmlfor="checkbox">
           <span class="checkbox__control">
             <swirl-visually-hidden>
               <input aria-checked="true" checked="" class="checkbox__input" disabled="" id="checkbox" name="checkbox" type="checkbox" value="Value">

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

@@ -110,6 +110,40 @@
     color: var(--s-icon-success);
   }
 
+.chip--variant-outline.chip--pressed {
+    background-color: var(--s-action-primary-default);
+    color: var(--s-text-on-action-primary);
+  }
+
+.chip--variant-outline.chip--pressed:hover {
+      background-color: var(--s-action-primary-hovered);
+    }
+
+.chip--variant-outline.chip--pressed:hover + .chip__remove-button {
+        background-color: var(--s-action-primary-hovered);
+      }
+
+.chip--variant-outline.chip--pressed:active {
+      background-color: var(--s-action-primary-pressed);
+    }
+
+.chip--variant-outline.chip--pressed:active + .chip__remove-button {
+        background-color: var(--s-action-primary-pressed);
+      }
+
+.chip--variant-outline.chip--pressed + .chip__remove-button {
+      background-color: var(--s-action-primary-default);
+      color: var(--s-text-on-action-primary);
+    }
+
+.chip--variant-outline.chip--pressed + .chip__remove-button:hover {
+        background-color: var(--s-action-primary-hovered);
+      }
+
+.chip--variant-outline.chip--pressed + .chip__remove-button:active {
+        background-color: var(--s-action-primary-pressed);
+      }
+
 .chip--variant-plain {
   height: auto;
   border: none;

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

@@ -17,6 +17,7 @@ export class SwirlChip {
     this.interactive = false;
     this.label = undefined;
     this.progress = undefined;
+    this.pressed = undefined;
     this.progressBarLabel = "Loading progress";
     this.removable = undefined;
     this.removeButtonLabel = "Remove";
@@ -39,18 +40,19 @@ export class SwirlChip {
     icon?.setAttribute("size", iconSize);
   }
   render() {
-    const Tag = this.interactive ? "button" : "span";
+    const Tag = this.interactive || this.pressed !== undefined ? "button" : "span";
     const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
     const showIcon = !showAvatar && Boolean(this.icon);
     const className = classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+      "chip--pressed": this.pressed,
       "chip--has-progress": this.progress !== undefined,
-      "chip--interactive": this.interactive,
+      "chip--interactive": this.interactive || this.pressed !== undefined,
       "chip--removable": this.removable,
     });
-    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, h("span", { class: "chip__inner" }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { class: "chip__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { size: 20 })))));
+    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined, "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined }, h("span", { class: "chip__inner" }, showAvatar && (h("span", { class: "chip__avatar" }, h("slot", { name: "avatar" }))), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { class: "chip__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.remove.emit }, h("swirl-icon-close", { size: 20 })))));
   }
   static get is() { return "swirl-chip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["swirl-chip.css"]
@@ -201,6 +203,23 @@ export class SwirlChip {
         "attribute": "progress",
         "reflect": false
       },
+      "pressed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pressed",
+        "reflect": false
+      },
       "progressBarLabel": {
         "type": "string",
         "mutable": false,

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

@@ -8,13 +8,11 @@ describe("swirl-chip", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-chip intent="critical" label="Label">
-        <mock:shadow-root>
-          <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-critical chip--size-m chip--variant-outline">
-            <span class="chip__inner">
-              <span class="chip__label">Label</span>
-            </span>
+        <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-critical chip--size-m chip--variant-outline">
+          <span class="chip__inner">
+            <span class="chip__label">Label</span>
           </span>
-        </mock:shadow-root>
+        </span>
       </swirl-chip>
     `);
   });
@@ -25,13 +23,11 @@ describe("swirl-chip", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-chip interactive="true" label="Label">
-        <mock:shadow-root>
-          <button class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--interactive chip--variant-outline" type="button">
-            <span class="chip__inner">
-              <span class="chip__label">Label</span>
-            </span>
-          </button>
-        </mock:shadow-root>
+        <button class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--interactive chip--variant-outline" type="button">
+          <span class="chip__inner">
+            <span class="chip__label">Label</span>
+          </span>
+        </button>
       </swirl-chip>
     `);
   });
@@ -42,14 +38,27 @@ describe("swirl-chip", () => {
     });
     expect(page.root).toEqualHtml(`
       <swirl-chip label="Label">
-        <mock:shadow-root>
-          <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--variant-outline">
-            <span class="chip__inner">
-              <span class="chip__label">Label</span>
-            </span>
-          </span>
-        </mock:shadow-root>
         <swirl-avatar initials="JD" size="xs"></swirl-avatar>
+        <span class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--variant-outline">
+          <span class="chip__inner">
+            <span class="chip__label">Label</span>
+          </span>
+        </span>
+      </swirl-chip>
+    `);
+  });
+  it("renders pressed", async () => {
+    const page = await newSpecPage({
+      components: [SwirlChip],
+      html: `<swirl-chip pressed="true" label="Label"></swirl-chip>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-chip pressed="true" label="Label">
+        <button aria-pressed="true" class="chip chip--border-radius-pill chip--icon-color-default chip--intent-default chip--size-m chip--variant-outline chip--interactive chip--pressed">
+          <span class="chip__inner">
+            <span class="chip__label">Label</span>
+          </span>
+        </button>
       </swirl-chip>
     `);
   });
@@ -58,7 +67,7 @@ describe("swirl-chip", () => {
       components: [SwirlChip],
       html: `<swirl-chip label="Label" icon="<swirl-icon-person size=&quot;16&quot;></swirl-icon-person>"></swirl-chip>`,
     });
-    const icon = page.root.shadowRoot.querySelector(".chip__icon > *");
+    const icon = page.root.querySelector(".chip__icon > *");
     await page.waitForChanges();
     expect(icon).toBeTruthy();
     expect(icon.getAttribute("size")).toBe("24");

package/dist/collection/components/swirl-description-list-item/swirl-description-list-item.js

@@ -6,12 +6,13 @@ import classNames from "classnames";
 export class SwirlDescriptionListItem {
   constructor() {
     this.bordered = true;
+    this.maxWidth = undefined;
     this.orientation = "horizontal";
     this.term = undefined;
   }
   render() {
     const className = classNames("description-list-item", `description-list-item--orientation-${this.orientation}`, { "description-list-item--bordered": this.bordered });
-    return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term), h("div", { class: "description-list-item__description", role: "definition" }, h("slot", null)))));
+    return (h(Host, { role: "listitem" }, h("div", { class: className, part: "description-list-item", role: "group" }, h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term), h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, h("slot", null)))));
   }
   static get is() { return "swirl-description-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -45,6 +46,23 @@ export class SwirlDescriptionListItem {
         "reflect": false,
         "defaultValue": "true"
       },
+      "maxWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-width",
+        "reflect": false
+      },
       "orientation": {
         "type": "string",
         "mutable": false,

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

@@ -17,6 +17,39 @@
       0 0 0 0.1875rem var(--s-focus-default);
   }
 
+.radio--variant-card {
+  width: 100%;
+  padding: var(--s-space-16);
+  border: 0.0625rem solid var(--s-border-default);
+  border-radius: var(--s-border-radius-sm);
+  background-color: var(--s-surface);
+}
+
+.radio--variant-card:focus-within {
+    box-shadow: 0 0 0 0.125rem var(--s-background-default),
+      0 0 0 0.25rem var(--s-focus-default);
+  }
+
+.radio--variant-card:focus-within .radio__box {
+      box-shadow: none;
+    }
+
+.radio--variant-card:hover:not(.radio--disabled) {
+    background-color: var(--s-surface-hovered);
+  }
+
+.radio--variant-card:active:not(.radio--disabled) {
+    background-color: var(--s-surface-pressed);
+  }
+
+.radio--variant-card.radio--checked:not(.radio--disabled) {
+    border-color: var(--s-border-highlight);
+  }
+
+.radio--variant-card.radio--invalid:not(.radio--disabled) {
+    border-color: var(--s-border-critical);
+  }
+
 .radio--checked .radio__control:hover .radio__box {
         border-color: var(--s-interactive-primary-hovered);
         background-color: var(--s-interactive-primary-hovered);

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

@@ -14,6 +14,7 @@ export class SwirlRadio {
     this.invalid = undefined;
     this.label = undefined;
     this.value = undefined;
+    this.variant = "default";
   }
   getAriaCheckedLabel(checked, unchecked) {
     if (checked) {
@@ -29,13 +30,13 @@ export class SwirlRadio {
     const checked = this.checked === true || this.checked === "true";
     const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
     const ariaInvalid = this.invalid;
-    const className = classnames("radio", {
+    const className = classnames("radio", `radio--variant-${this.variant}`, {
       "radio--checked": checked,
       "radio--disabled": this.disabled,
       "radio--invalid": this.invalid,
       "radio--unchecked": unchecked,
     });
-    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "radio__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { "aria-hidden": "true", class: "radio__box" })), h("span", { class: "radio__label-container" }, this.label && h("span", { class: "radio__label" }, this.label), this.description && (h("span", { class: "radio__description", innerHTML: this.description }))))));
+    return (h(Host, { style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "radio__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { "aria-hidden": "true", class: "radio__box" })), h("span", { class: "radio__label-container" }, this.label && h("span", { class: "radio__label" }, this.label), this.description && (h("span", { class: "radio__description", innerHTML: this.description }))))));
   }
   static get is() { return "swirl-radio"; }
   static get encapsulation() { return "scoped"; }
@@ -193,6 +194,29 @@ export class SwirlRadio {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlRadioVariant",
+          "resolved": "\"card\" | \"default\"",
+          "references": {
+            "SwirlRadioVariant": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-radio/swirl-radio.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -8,7 +8,7 @@ describe("swirl-radio", () => {
     });
     expect(page.root).toMatchInlineSnapshot(`
       <swirl-radio checked="true" disabled="true" input-id="radio" input-name="radio" label="Label" value="Value">
-        <label class="radio radio--checked radio--disabled" htmlfor="radio">
+        <label class="radio radio--checked radio--disabled radio--variant-default" htmlfor="radio">
           <span class="radio__control">
             <swirl-visually-hidden>
               <input aria-checked="true" checked="" class="radio__input" disabled="" id="radio" name="radio" type="radio" value="Value">

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }

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

@@ -0,0 +1,128 @@
+import { h, Host } from "@stencil/core";
+import { getActiveElement } from "../../utils";
+export class SwirlToolbar {
+  constructor() {
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown" || event.code === "ArrowRight") {
+        event.preventDefault();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.focusPreviousItem();
+      }
+    };
+    this.label = undefined;
+    this.orientation = "horizontal";
+  }
+  componentDidLoad() {
+    const items = this.getItems();
+    this.deactivateTabIndexes(items);
+    const firstButton = items[0]?.querySelector("button");
+    if (!Boolean(firstButton)) {
+      return;
+    }
+    firstButton.tabIndex = 0;
+  }
+  getItems() {
+    return Array.from(this.el.querySelectorAll("swirl-button, swirl-chip"));
+  }
+  focusNextItem() {
+    const items = this.getItems();
+    const activeItemIndex = this.getActiveItemIndex(items);
+    const newIndex = (activeItemIndex + 1) % items.length;
+    this.focusItem(items[newIndex]);
+  }
+  focusPreviousItem() {
+    const items = this.getItems();
+    const activeItemIndex = this.getActiveItemIndex(items);
+    const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
+    this.focusItem(items[newIndex]);
+  }
+  getActiveItemIndex(items) {
+    const activeElement = getActiveElement();
+    return items.findIndex((item) => item === activeElement?.closest("swirl-button, swirl-chip"));
+  }
+  focusItem(item) {
+    const items = this.getItems();
+    this.deactivateTabIndexes(items);
+    if (!Boolean(item)) {
+      return;
+    }
+    const button = item.querySelector("button");
+    if (!Boolean(button)) {
+      return;
+    }
+    button.tabIndex = 0;
+    button.focus();
+  }
+  deactivateTabIndexes(items) {
+    items.forEach((item) => {
+      const button = item.querySelector("button");
+      if (!Boolean(button)) {
+        return;
+      }
+      button.tabIndex = -1;
+    });
+  }
+  render() {
+    return (h(Host, null, h("swirl-stack", { align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", null))));
+  }
+  static get is() { return "swirl-toolbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["swirl-toolbar.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["swirl-toolbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlToolbarOrientation",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "SwirlToolbarOrientation": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-toolbar/swirl-toolbar.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "\"horizontal\""
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlToolbar } from "./swirl-toolbar";
+describe("swirl-toolbar", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [SwirlToolbar],
+      html: `
+        <swirl-toolbar>
+          <swirl-chip label="Remove" pressed="true"></swirl-chip>
+          <swirl-button icon="<swirl-icon-add></swirl-icon-add>" label="Add"></swirl-button>
+        </swirl-toolbar>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-toolbar>
+        <mock:shadow-root>
+          <swirl-stack align="center" aria-orientation="horizontal" orientation="horizontal" role="toolbar" spacing="8">
+            <slot></slot>
+          </swirl-stack>
+        </mock:shadow-root>
+        <swirl-chip label="Remove" pressed="true"></swirl-chip>
+        <swirl-button icon="<swirl-icon-add></swirl-icon-add>" label="Add"></swirl-button>
+      </swirl-toolbar>
+    `);
+  });
+});

package/dist/collection/components/swirl-toolbar/swirl-toolbar.stories.js

@@ -0,0 +1,24 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-toolbar.mdx";
+export default {
+  component: "swirl-toolbar",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/SwirlToolbar",
+};
+const Template = (args) => {
+  const element = generateStoryElement("swirl-toolbar", args);
+  element.innerHTML = `
+    <swirl-chip label="Remove" pressed="true"></swirl-chip>
+    <swirl-button icon="<swirl-icon-add></swirl-icon-add>" label="Add"></swirl-button>
+  `;
+  return element;
+};
+export const SwirlToolbar = Template.bind({});
+SwirlToolbar.args = {
+  label: "Label",
+};