@getflip/swirl-components 0.36.0 → 0.38.0

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\""
       }
     };
   }

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

@@ -1,8 +1,6 @@
 :host {
   display: flex;
   width: 100%;
-  padding-top: var(--s-space-8);
-  padding-bottom: var(--s-space-8);
   align-items: center;
 }
 

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

@@ -1,7 +1,14 @@
 import { h, Host } from "@stencil/core";
 export class SwirlSeparator {
+  constructor() {
+    this.spacing = "8";
+  }
   render() {
-    return (h(Host, { class: "separator", role: "separator" }, h("span", { class: "separator__line" })));
+    const styles = {
+      paddingTop: `var(--s-space-${this.spacing})`,
+      paddingBottom: `var(--s-space-${this.spacing})`,
+    };
+    return (h(Host, { class: "separator", role: "separator", style: styles }, h("span", { class: "separator__line" })));
   }
   static get is() { return "swirl-separator"; }
   static get encapsulation() { return "shadow"; }
@@ -15,4 +22,31 @@ export class SwirlSeparator {
       "$": ["swirl-separator.css"]
     };
   }
+  static get properties() {
+    return {
+      "spacing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlSeparatorSpacing",
+          "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"24\" | \"32\" | \"4\" | \"8\"",
+          "references": {
+            "SwirlSeparatorSpacing": {
+              "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": "spacing",
+        "reflect": false,
+        "defaultValue": "\"8\""
+      }
+    };
+  }
 }

package/dist/collection/components/swirl-table-cell/swirl-table-cell.css

@@ -24,14 +24,6 @@
     box-shadow: var(--swirl-table-sticky-left-shadow);
   }
 
-  :host(:first-child) {
-    border-left: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
-  :host(:last-child) {
-    border-right: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
   :host * {
     box-sizing: border-box;
   }

package/dist/collection/components/swirl-table-column/swirl-table-column.css

@@ -9,7 +9,6 @@
   flex-grow: 1;
   flex-shrink: 1;
   align-items: center;
-  border-top: var(--s-border-width-default) solid var(--s-border-default);
   border-bottom: var(--s-border-width-default) solid var(--s-border-default);
   color: var(--s-text-subdued);
   background-color: var(--s-background-default);
@@ -23,14 +22,6 @@
   gap: var(--s-space-8);
 }
 
-  :host(:first-child) {
-    border-left: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
-  :host(:last-child) {
-    border-right: var(--s-border-width-default) solid var(--s-border-default);
-  }
-
   :host(.table-column--has-shadow-right) {
     box-shadow: var(--swirl-table-sticky-right-shadow);
   }

package/dist/components/swirl-box2.js

@@ -15,6 +15,10 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.maxWidth = undefined;
     this.overflow = "visible";
     this.padding = "0";
+    this.paddingBlockEnd = undefined;
+    this.paddingBlockStart = undefined;
+    this.paddingInlineEnd = undefined;
+    this.paddingInlineStart = undefined;
   }
   render() {
     const styles = {
@@ -24,6 +28,18 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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,
@@ -42,7 +58,11 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "cover": [4],
     "maxWidth": [1, "max-width"],
     "overflow": [1],
-    "padding": [1]
+    "padding": [1],
+    "paddingBlockEnd": [1, "padding-block-end"],
+    "paddingBlockStart": [1, "padding-block-start"],
+    "paddingInlineEnd": [1, "padding-inline-end"],
+    "paddingInlineStart": [1, "padding-inline-start"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/swirl-console-layout.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './swirl-button2.js';
 import { d as defineCustomElement$3 } from './swirl-heading2.js';
 import { d as defineCustomElement$2 } from './swirl-text2.js';
 
-const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{box-shadow:0 0 1rem rgba(0, 0, 0, 0.06);transform:translate3d(0, 0, 0)}}.console-layout__sidebar{position:fixed;z-index:1;top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;z-index:1;top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__content-header{flex-shrink:0}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:2.5rem;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__subheading{margin-top:var(--s-space-8)}";
+const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;z-index:1;top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__content-header{flex-shrink:0}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:2.5rem;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__subheading{margin-top:var(--s-space-8)}";
 
 const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/swirl-pagination.js

@@ -1,10 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$4 } from './swirl-button2.js';
-import { d as defineCustomElement$3 } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$3 } from './swirl-button2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlPaginationCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;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)}}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";
+const swirlPaginationCss = ":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none}@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)}}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.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}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}@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)}}";
 
 const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,6 +11,18 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.setPage = createEvent(this, "setPage", 7);
+    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) {
@@ -33,46 +44,45 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
       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 style() { return swirlPaginationCss; }
 }, [1, "swirl-pagination", {
-    "accessibleNextButtonLabel": [1, "accessible-next-button-label"],
-    "accessiblePrevButtonLabel": [1, "accessible-prev-button-label"],
-    "nextButtonLabel": [1, "next-button-label"],
-    "pageLabel": [1, "page-label"],
-    "prevButtonLabel": [1, "prev-button-label"],
+    "firstPageButtonLabel": [1, "first-page-button-label"],
+    "lastPageButtonLabel": [1, "last-page-button-label"],
     "label": [1],
+    "nextButtonLabel": [1, "next-button-label"],
     "page": [2],
+    "pageLabel": [1, "page-label"],
     "pages": [2],
     "pageSelectLabel": [1, "page-select-label"],
+    "prevButtonLabel": [1, "prev-button-label"],
     "variant": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-pagination", "swirl-button", "swirl-icon-expand-more", "swirl-visually-hidden"];
+  const components = ["swirl-pagination", "swirl-button", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-pagination":
       if (!customElements.get(tagName)) {
@@ -80,11 +90,6 @@ function defineCustomElement$1() {
       }
       break;
     case "swirl-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "swirl-icon-expand-more":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/swirl-search.js

@@ -4,7 +4,7 @@ import { g as getDesktopMediaQuery } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-icon-cancel2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-search2.js';
 
-const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{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))}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
+const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{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)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
 
 const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -39,6 +39,7 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.label = undefined;
     this.placeholder = "Search …";
     this.value = undefined;
+    this.variant = "filled";
   }
   componentDidLoad() {
     var _a, _b;
@@ -63,7 +64,7 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     }
   }
   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))))));
@@ -77,7 +78,8 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "inputId": [1, "input-id"],
     "label": [1],
     "placeholder": [1],
-    "value": [1025]
+    "value": [1025],
+    "variant": [1]
   }, [[8, "keydown", "onKeyDown"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {