@getflip/swirl-components 0.37.0 → 0.38.0

package/dist/collection/collection-manifest.json

@@ -28,6 +28,7 @@
     "./components/swirl-popover/swirl-popover.js",
     "./components/swirl-progress-indicator/swirl-progress-indicator.js",
     "./components/swirl-radio/swirl-radio.js",
+    "./components/swirl-search/swirl-search.js",
     "./components/swirl-separator/swirl-separator.js",
     "./components/swirl-skeleton-box/swirl-skeleton-box.js",
     "./components/swirl-skeleton-text/swirl-skeleton-text.js",
@@ -172,7 +173,6 @@
     "./components/swirl-resource-list/swirl-resource-list.js",
     "./components/swirl-resource-list-file-item/swirl-resource-list-file-item.js",
     "./components/swirl-resource-list-item/swirl-resource-list-item.js",
-    "./components/swirl-search/swirl-search.js",
     "./components/swirl-select/swirl-select.js",
     "./components/swirl-shell-layout/swirl-shell-layout.js",
     "./components/swirl-shell-navigation-item/swirl-shell-navigation-item.js",

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

@@ -12,6 +12,10 @@ export class SwirlBox {
     this.maxWidth = undefined;
     this.overflow = "visible";
     this.padding = "0";
+    this.paddingBlockEnd = undefined;
+    this.paddingBlockStart = undefined;
+    this.paddingInlineEnd = undefined;
+    this.paddingInlineStart = undefined;
   }
   render() {
     const styles = {
@@ -21,6 +25,18 @@ export class SwirlBox {
       justifyContent: this.centerInline ? "center" : undefined,
       overflow: this.overflow,
       padding: `var(--s-space-${this.padding})`,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd)
+        ? `var(--s-space-${this.paddingBlockEnd})`
+        : undefined,
+      paddingBlockStart: Boolean(this.paddingBlockStart)
+        ? `var(--s-space-${this.paddingBlockStart})`
+        : undefined,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd)
+        ? `var(--s-space-${this.paddingInlineEnd})`
+        : undefined,
+      paddingInlineStart: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
       position: Boolean(this.overflow) ? "relative" : "",
       maxWidth: this.maxWidth,
       width: this.cover ? "100%" : undefined,
@@ -175,6 +191,94 @@ export class SwirlBox {
         "attribute": "padding",
         "reflect": false,
         "defaultValue": "\"0\""
+      },
+      "paddingBlockEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlBoxPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlBoxPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-box/swirl-box.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-block-end",
+        "reflect": false
+      },
+      "paddingBlockStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlBoxPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlBoxPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-box/swirl-box.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-block-start",
+        "reflect": false
+      },
+      "paddingInlineEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlBoxPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlBoxPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-box/swirl-box.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-inline-end",
+        "reflect": false
+      },
+      "paddingInlineStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlBoxPadding",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlBoxPadding": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-box/swirl-box.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "padding-inline-start",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/swirl-console-layout/swirl-console-layout.css

@@ -34,7 +34,7 @@
 
 .console-layout__sidebar {
   position: fixed;
-  z-index: 1;
+  z-index: var(--s-z-30);
   top: 4rem;
   bottom: 0;
   left: 0;

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

@@ -1,6 +1,8 @@
 :host {
   display: block;
-  width: 100%;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
   :host * {
@@ -24,18 +26,21 @@
   align-items: center;
   line-height: var(--s-line-height-base);
   list-style: none;
-  gap: var(--s-space-16);
 }
 
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .pagination__list {
     font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm);
-    gap: var(--s-space-8)
+    line-height: var(--s-line-height-sm)
 }
   }
 
+.pagination__page-label {
+  padding-right: var(--s-space-8);
+  padding-left: var(--s-space-8);
+}
+
 .pagination__advanced-label {
   display: flex;
   align-items: center;
@@ -49,13 +54,18 @@
 
 .pagination__page-select {
   display: inline-flex;
+  padding-top: var(--s-space-8);
   padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-16);
   border: none;
+  border-radius: var(--s-border-radius-sm);
   background-color: transparent;
   font: inherit;
   line-height: var(--s-line-height-base);
   text-align: center;
   cursor: pointer;
+  box-shadow: inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -69,10 +79,10 @@
     outline-color: var(--s-focus-default);
   }
 
-.pagination__page-select-icon {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  pointer-events: none;
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.pagination__page-select {
+    font-size: var(--s-font-size-sm);
+    line-height: var(--s-line-height-sm)
 }
+  }

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

@@ -2,6 +2,18 @@ import { h, Host } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlPagination {
   constructor() {
+    this.onFirstPageButtonClick = () => {
+      if (this.page === 1) {
+        return;
+      }
+      this.setPage.emit(1);
+    };
+    this.onLastPageButtonClick = () => {
+      if (this.page === this.pages) {
+        return;
+      }
+      this.setPage.emit(this.pages);
+    };
     this.onPrevButtonClick = () => {
       const prevPage = Math.max(this.page - 1, 1);
       if (this.page === prevPage) {
@@ -23,27 +35,26 @@ export class SwirlPagination {
       }
       this.setPage.emit(page);
     };
-    this.accessibleNextButtonLabel = "Next page";
-    this.accessiblePrevButtonLabel = "Previous page";
-    this.nextButtonLabel = "Next";
-    this.pageLabel = "out of";
-    this.prevButtonLabel = "Prev";
+    this.firstPageButtonLabel = "First page";
+    this.lastPageButtonLabel = "Last page";
     this.label = undefined;
+    this.nextButtonLabel = "Next page";
     this.page = undefined;
+    this.pageLabel = "out of";
     this.pages = undefined;
     this.pageSelectLabel = "Select a page";
+    this.prevButtonLabel = "Previous page";
     this.variant = "default";
   }
   render() {
-    const hideButtonLabels = this.variant !== "advanced";
     const showPageLabel = this.variant !== "simple";
     const showDropDown = this.variant === "advanced";
     const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
     const className = classnames("pagination", `pagination--variant-${this.variant}`);
-    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list", part: "pagination__list" }, h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__prev-button", disabled: this.page <= 1, swirlAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list", part: "pagination__list" }, h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
       .fill(undefined)
       .map((_, index) => index + 1)
-      .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page)))), h("swirl-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__next-button", disabled: this.page >= this.pages, swirlAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+      .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page))))), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
   }
   static get is() { return "swirl-pagination"; }
   static get encapsulation() { return "shadow"; }
@@ -59,7 +70,7 @@ export class SwirlPagination {
   }
   static get properties() {
     return {
-      "accessibleNextButtonLabel": {
+      "firstPageButtonLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -73,11 +84,11 @@ export class SwirlPagination {
           "tags": [],
           "text": ""
         },
-        "attribute": "accessible-next-button-label",
+        "attribute": "first-page-button-label",
         "reflect": false,
-        "defaultValue": "\"Next page\""
+        "defaultValue": "\"First page\""
       },
-      "accessiblePrevButtonLabel": {
+      "lastPageButtonLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -91,11 +102,11 @@ export class SwirlPagination {
           "tags": [],
           "text": ""
         },
-        "attribute": "accessible-prev-button-label",
+        "attribute": "last-page-button-label",
         "reflect": false,
-        "defaultValue": "\"Previous page\""
+        "defaultValue": "\"Last page\""
       },
-      "nextButtonLabel": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -103,17 +114,16 @@ export class SwirlPagination {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "next-button-label",
-        "reflect": false,
-        "defaultValue": "\"Next\""
+        "attribute": "label",
+        "reflect": false
       },
-      "pageLabel": {
+      "nextButtonLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -127,29 +137,28 @@ export class SwirlPagination {
           "tags": [],
           "text": ""
         },
-        "attribute": "page-label",
+        "attribute": "next-button-label",
         "reflect": false,
-        "defaultValue": "\"out of\""
+        "defaultValue": "\"Next page\""
       },
-      "prevButtonLabel": {
-        "type": "string",
+      "page": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
-        "required": false,
-        "optional": true,
+        "required": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "prev-button-label",
-        "reflect": false,
-        "defaultValue": "\"Prev\""
+        "attribute": "page",
+        "reflect": false
       },
-      "label": {
+      "pageLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -157,16 +166,17 @@ export class SwirlPagination {
           "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
-        "reflect": false
+        "attribute": "page-label",
+        "reflect": false,
+        "defaultValue": "\"out of\""
       },
-      "page": {
+      "pages": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -180,27 +190,28 @@ export class SwirlPagination {
           "tags": [],
           "text": ""
         },
-        "attribute": "page",
+        "attribute": "pages",
         "reflect": false
       },
-      "pages": {
-        "type": "number",
+      "pageSelectLabel": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": true,
-        "optional": false,
+        "required": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "pages",
-        "reflect": false
+        "attribute": "page-select-label",
+        "reflect": false,
+        "defaultValue": "\"Select a page\""
       },
-      "pageSelectLabel": {
+      "prevButtonLabel": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -214,9 +225,9 @@ export class SwirlPagination {
           "tags": [],
           "text": ""
         },
-        "attribute": "page-select-label",
+        "attribute": "prev-button-label",
         "reflect": false,
-        "defaultValue": "\"Select a page\""
+        "defaultValue": "\"Previous page\""
       },
       "variant": {
         "type": "string",

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

@@ -13,6 +13,11 @@
   width: 100%;
 }
 
+.search--variant-outline .search__input {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--s-border-width-default) var(--s-border-strong);
+  }
+
 .search--disabled .search__icon {
     color: var(--s-icon-disabled);
   }
@@ -89,9 +94,10 @@
 @media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
 
 .search__input {
+    height: 2.25rem;
+    padding-left: calc(var(--s-space-8) + 1.5rem + var(--s-space-8));
     font-size: var(--s-font-size-sm);
-    line-height: var(--s-line-height-sm);
-    padding-left: calc(var(--s-space-8) + 1.5rem + var(--s-space-8))
+    line-height: var(--s-line-height-sm)
 }
   }
 

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

@@ -29,6 +29,7 @@ export class SwirlSearch {
     this.label = undefined;
     this.placeholder = "Search …";
     this.value = undefined;
+    this.variant = "filled";
   }
   componentDidLoad() {
     var _a, _b;
@@ -53,7 +54,7 @@ export class SwirlSearch {
     }
   }
   render() {
-    const className = classnames("search", {
+    const className = classnames("search", `search--variant-${this.variant}`, {
       "search--disabled": this.disabled,
     });
     return (h(Host, null, h("span", { class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { class: "search__icon" }), h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", null))))));
@@ -209,6 +210,29 @@ export class SwirlSearch {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSearchVariant",
+          "resolved": "\"filled\" | \"outline\"",
+          "references": {
+            "SwirlSearchVariant": {
+              "location": "local",
+              "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-search/swirl-search.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"filled\""
       }
     };
   }