@getflip/swirl-components 0.88.0 → 0.89.0

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,15 +40,16 @@ 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"; }
@@ -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

@@ -53,6 +53,23 @@ describe("swirl-chip", () => {
       </swirl-chip>
     `);
   });
+  it.only("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">
+        <mock:shadow-root>
+          <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>
+        </mock:shadow-root>
+      </swirl-chip>
+    `);
+  });
   it("renders icon with overwritten props", async () => {
     const page = await newSpecPage({
       components: [SwirlChip],

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SwirlDescriptionList {
   render() {
-    return (h(Host, null, h("dl", { class: "description-list" }, h("slot", null))));
+    return (h(Host, null, h("div", { class: "description-list", role: "list" }, h("slot", null))));
   }
   static get is() { return "swirl-description-list"; }
   static get encapsulation() { return "shadow"; }

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

@@ -16,9 +16,9 @@ describe("swirl-description-list", () => {
     expect(page.root).toEqualHtml(`
       <swirl-description-list>
         <mock:shadow-root>
-          <dl class="description-list">
+          <div class="description-list" role="list">
             <slot></slot>
-          </dl>
+          </div>
         </mock:shadow-root>
         <swirl-description-list-item term="Term #1">
           A short description

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, null, h("div", { class: className, part: "description-list-item" }, h("dt", { class: "description-list-item__term", part: "description-list-item__term" }, this.term), h("dd", { class: "description-list-item__description" }, 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-description-list-item/swirl-description-list-item.spec.js

@@ -7,13 +7,13 @@ describe("swirl-description-list-item", () => {
       html: `<swirl-description-list-item term="Term">Description</swirl-description-list-item>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-description-list-item term="Term">
+      <swirl-description-list-item role="listitem" term="Term">
         <mock:shadow-root>
-          <div class="description-list-item description-list-item--bordered description-list-item--orientation-horizontal" part="description-list-item">
-            <dt class="description-list-item__term" part="description-list-item__term">Term</dt>
-            <dd class="description-list-item__description">
+          <div class="description-list-item description-list-item--bordered description-list-item--orientation-horizontal" part="description-list-item" role="group">
+            <div class="description-list-item__term" part="description-list-item__term" role="term">Term</div>
+            <div class="description-list-item__description" role="definition">
               <slot></slot>
-            </dd>
+            </div>
           </div>
         </mock:shadow-root>
         Description

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">