@getflip/swirl-components 0.94.1 → 0.95.0

package/dist/collection/collection-manifest.json

@@ -39,7 +39,6 @@
     "./components/swirl-skeleton-text/swirl-skeleton-text.js",
     "./components/swirl-spinner/swirl-spinner.js",
     "./components/swirl-status-indicator/swirl-status-indicator.js",
-    "./components/swirl-switch/swirl-switch.js",
     "./components/swirl-tab-bar/swirl-tab-bar.js",
     "./components/swirl-table-column/swirl-table-column.js",
     "./components/swirl-tag/swirl-tag.js",
@@ -229,6 +228,7 @@
     "./components/swirl-select/swirl-select.js",
     "./components/swirl-shell-layout/swirl-shell-layout.js",
     "./components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",
+    "./components/swirl-switch/swirl-switch.js",
     "./components/swirl-symbol/symbols/swirl-symbol-cloud.js",
     "./components/swirl-symbol/swirl-symbol.js",
     "./components/swirl-symbol/symbols/swirl-symbol-account-circle.js",

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

@@ -70,9 +70,9 @@
   width: 18.5rem;
   max-height: 90vh;
   padding-top: var(--s-space-24);
-  padding-right: var(--s-space-8);
-  padding-bottom: var(--s-space-8);
-  padding-left: var(--s-space-8);
+  padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-16);
+  padding-left: var(--s-space-16);
   border-radius: var(--s-border-radius-l);
   background-color: var(--s-surface-overlay-default);
   text-align: center;
@@ -82,13 +82,23 @@
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .dialog__body {
+    width: 25rem;
     border-radius: var(--s-border-radius-base)
 }
   }
 
+@media (min-width: 992px) {
+
+.dialog__body {
+    text-align: start
+}
+  }
+
 .dialog__heading {
   margin: 0;
   margin-bottom: var(--s-space-8);
+  padding-right: var(--s-space-8);
+  padding-left: var(--s-space-8);
   font-size: var(--s-font-size-lg);
   font-weight: var(--s-font-weight-semibold);
   line-height: var(--s-line-height-lg);
@@ -97,13 +107,14 @@
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .dialog__heading {
-    font-size: var(--s-font-size-base);
     line-height: var(--s-line-height-base)
 }
   }
 
 .dialog__content {
-  margin-bottom: var(--s-space-24);
+  margin-bottom: var(--s-space-20);
+  padding-right: var(--s-space-8);
+  padding-left: var(--s-space-8);
   line-height: var(--s-line-height-base);
 }
 
@@ -119,6 +130,38 @@
 }
   }
 
+@media (min-width: 992px) {
+
+.dialog__content {
+    margin-bottom: var(--s-space-24)
+}
+  }
+
+.dialog__controls {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  gap: var(--s-space-8);
+}
+
+.dialog__controls > * {
+    flex-grow: 1;
+  }
+
+@media (min-width: 992px) {
+
+.dialog__controls > * {
+      flex-grow: 0
+  }
+    }
+
+@media (min-width: 992px) {
+
+.dialog__controls {
+    justify-content: flex-end
+}
+  }
+
 @keyframes dialog-scale-in {
   from {
     transform: scale(0);

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

@@ -61,7 +61,7 @@ export class SwirlDialog {
   }
   render() {
     const className = classnames("dialog", { "dialog--closing": this.closing });
-    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("swirl-button-group", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el), stretch: true, wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+    return (h(Host, null, h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", null)), h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
   }
   static get is() { return "swirl-dialog"; }
   static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ describe("swirl-dialog", () => {
               <div class="dialog__content" part="dialog__content" id="content">
                 <slot></slot>
               </div>
-              <swirl-button-group class="dialog__controls" stretch="" wrap=""></swirl-button-group>
+              <div class="dialog__controls"></div>
             </div>
           </div>
         </mock:shadow-root>

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

@@ -34,7 +34,7 @@ const Template = (args) => {
 };
 export const SwirlDialog = Template.bind({});
 SwirlDialog.args = {
-  intent: "critical",
+  intent: "primary",
   label: "Dialog",
   primaryActionLabel: "Leave",
   secondaryActionLabel: "Cancel",

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

@@ -19,6 +19,8 @@
   --swirl-resource-list-item-background-pressed: var(
     --s-surface-overlay-pressed
   );
+  --swirl-modal-height: auto;
+  --swirl-modal-max-height: 90vh;
 
   position: fixed;
   z-index: var(--s-z-40);
@@ -263,7 +265,7 @@
 
 .modal__body {
     width: 90vw;
-    max-height: 90vh;
+    max-height: var(--swirl-modal-max-height);
     border-radius: var(--s-border-radius-base);
     box-shadow: var(--s-shadow-level-3)
 }
@@ -272,7 +274,7 @@
 @media (min-width: 992px) {
 
 .modal__body {
-    height: auto
+    height: var(--swirl-modal-height)
 }
   }
 

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

@@ -44,6 +44,7 @@ export class SwirlModal {
     };
     this.closable = true;
     this.closeButtonLabel = "Close modal";
+    this.height = undefined;
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
     this.label = undefined;
@@ -81,7 +82,7 @@ export class SwirlModal {
     });
   }
   disconnectedCallback() {
-    this.focusTrap.deactivate();
+    this.focusTrap?.deactivate();
     this.unlockBodyScroll();
   }
   onWindowResize() {
@@ -162,7 +163,11 @@ export class SwirlModal {
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxHeight: this.maxHeight, maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: {
+        "--swirl-modal-max-height": this.maxHeight,
+        "--swirl-modal-height": this.height,
+        maxWidth: this.maxWidth,
+      } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
         ? "<swirl-icon-close></swirl-icon-close>"
         : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))))), h("div", { class: "modal__content-container" }, h("div", { class: "modal__primary-content" }, h("div", { class: "modal__header-tools" }, h("slot", { name: "header-tools" })), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null))), h("div", { class: "modal__secondary-content" }, h("slot", { name: "secondary-content" }))), h("div", { class: "modal__custom-footer" }, h("slot", { name: "custom-footer" })), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
@@ -215,6 +220,23 @@ export class SwirlModal {
         "reflect": false,
         "defaultValue": "\"Close modal\""
       },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false
+      },
       "hideCloseButton": {
         "type": "boolean",
         "mutable": false,

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

@@ -17,29 +17,21 @@
       0 0 0 0.1875rem var(--s-focus-default);
   }
 
-.switch--size-m .switch__control {
-    width: 2.75rem;
-    height: 1.5rem;
-    border-radius: calc(1.5rem / 2);
+.switch--on .switch__thumb {
+    left: calc(100% - 1.25rem - var(--s-space-2));
   }
 
-.switch--size-m .switch__thumb {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
-.switch--on.switch--size-m .switch__thumb {
-      left: calc(100% - 1.25rem - var(--s-space-2));
+.switch--on .switch__thumb {
+      left: calc(100% - 0.875rem - var(--s-space-2))
+  }
     }
 
 .switch--on .switch__control {
     background-color: var(--s-interactive-primary-default);
   }
 
-.switch--on .switch__thumb {
-    left: calc(100% - 0.875rem - var(--s-space-2));
-  }
-
 .switch--disabled .switch__control {
     background-color: var(--s-interactive-primary-disabled);
     cursor: default;
@@ -55,10 +47,10 @@
 
 .switch__control {
   position: relative;
-  width: 1.875rem;
-  height: 1.125rem;
+  width: 2.75rem;
+  height: 1.5rem;
   flex-shrink: 0;
-  border-radius: calc(1.125rem / 2);
+  border-radius: calc(1.5rem / 2);
   background-color: var(--s-interactive-primary-disabled);
   cursor: pointer;
   transition: background-color 0.2s;
@@ -71,12 +63,21 @@
 }
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.switch__control {
+    width: 1.875rem;
+    height: 1.125rem;
+    border-radius: calc(1.125rem / 2)
+}
+  }
+
 .switch__thumb {
   position: absolute;
   top: var(--s-space-2);
   left: var(--s-space-2);
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 50%;
   background-color: var(--s-surface-default);
   transition: left 0.2s;
@@ -90,6 +91,14 @@
 }
   }
 
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.switch__thumb {
+    width: 0.875rem;
+    height: 0.875rem
+}
+  }
+
 .switch__label {
   position: relative;
   z-index: 1;

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

@@ -63,7 +63,6 @@ export class SwirlSwitch {
     this.inputId = undefined;
     this.inputName = undefined;
     this.label = undefined;
-    this.size = "m";
     this.value = undefined;
   }
   onWindowPointerUp() {
@@ -73,7 +72,7 @@ export class SwirlSwitch {
     const off = !this.checked;
     const on = this.checked;
     const ariaCheckedLabel = on ? "true" : "false";
-    const className = classnames("switch", `switch--size-${this.size}`, {
+    const className = classnames("switch", {
       "switch--off": off,
       "switch--on": on,
       "switch--disabled": this.disabled,
@@ -181,29 +180,6 @@ export class SwirlSwitch {
         "attribute": "label",
         "reflect": false
       },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "SwirlSwitchSize",
-          "resolved": "\"m\" | \"s\"",
-          "references": {
-            "SwirlSwitchSize": {
-              "location": "local",
-              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-switch/swirl-switch.tsx"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"m\""
-      },
       "value": {
         "type": "string",
         "mutable": false,

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

@@ -8,7 +8,7 @@ describe("swirl-switch", () => {
     });
     expect(page.root).toMatchInlineSnapshot(`
       <swirl-switch checked="true" disabled="true" input-id="switch" input-name="switch" label="Label" value="Value">
-        <label class="switch switch--disabled switch--on switch--size-m" htmlfor="switch">
+        <label class="switch switch--disabled switch--on" htmlfor="switch">
           <span class="switch__control">
             <swirl-visually-hidden>
               <input aria-checked="true" checked="" class="switch__input" disabled="" id="switch" name="switch" role="switch" type="checkbox" value="Value">