@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-option-list-item/flip-option-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list-item.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list-item/flip-option-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,OAAO,kBAAkB;EAL/B;IAM2B,YAAO,GAC9B,eAAe,CAAC;IAIO,aAAQ,GAAa,KAAK,CAAC;GAyErD;EApEC,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACzB,OAAO;KACR;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAErC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACxD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE3C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC;IACrD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IACxE,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IAE5E,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,6BAA6B,IAAI,CAAC,OAAO,EAAE,EAC3C;MACE,4BAA4B,EAAE,IAAI,CAAC,QAAQ;MAC3C,4BAA4B,EAAE,IAAI,CAAC,QAAQ;KAC5C,CACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,4BACiB,YAAY,mBACZ,YAAY,EAC3B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ;QAEZ,QAAQ,IAAI,CACX,YACE,KAAK,EAAC,wBAAwB,EAC9B,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT;QACA,YAAY,IAAI,CACf,YAAM,KAAK,EAAC,4BAA4B;UACtC,YAAM,KAAK,EAAC,gCAAgC,IACzC,IAAI,CAAC,QAAQ,IAAI,CAChB,8BACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAE,EAAE,GACgB,CAC3B,CACI,CACF,CACR;QACD,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ;QACxD,iBAAiB,IAAI,CACpB,YAAM,KAAK,EAAC,kCAAkC;UAC5C,gCAA+C,CAC1C,CACR,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipOptionListItemContext = \"single-select\" | \"multi-select\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list-item.css\",\n  tag: \"flip-option-list-item\",\n})\nexport class FlipOptionListItem {\n  @Prop({ mutable: true }) context?: FlipOptionListItemContext =\n    \"single-select\";\n  @Prop() disabled?: boolean;\n  @Prop() icon?: string;\n  @Prop() label!: string;\n  @Prop({ mutable: true }) selected?: boolean = false;\n  @Prop() value!: string;\n\n  private iconEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceIconProps();\n  }\n\n  private forceIconProps() {\n    if (!Boolean(this.iconEl)) {\n      return;\n    }\n\n    const icon = this.iconEl.children[0];\n\n    icon?.setAttribute(\"size\", \"24\");\n  }\n\n  render() {\n    const ariaDisabled = this.disabled ? \"true\" : undefined;\n    const ariaSelected = String(this.selected);\n\n    const showCheckbox = this.context === \"multi-select\";\n    const showIcon = Boolean(this.icon) && this.context === \"single-select\";\n    const showSelectionIcon = this.selected && this.context === \"single-select\";\n\n    const className = classnames(\n      \"option-list-item\",\n      `option-list-item--context-${this.context}`,\n      {\n        \"option-list-item--disabled\": this.disabled,\n        \"option-list-item--selected\": this.selected,\n      }\n    );\n\n    return (\n      <Host>\n        <div\n          aria-disabled={ariaDisabled}\n          aria-selected={ariaSelected}\n          class={className}\n          role=\"option\"\n        >\n          {showIcon && (\n            <span\n              class=\"option-list-item__icon\"\n              innerHTML={this.icon}\n              ref={(el) => (this.iconEl = el)}\n            ></span>\n          )}\n          {showCheckbox && (\n            <span class=\"option-list-item__checkbox\">\n              <span class=\"option-list-item__checkbox-box\">\n                {this.selected && (\n                  <flip-icon-check-strong\n                    class=\"option-list-item__checkbox-icon\"\n                    size={16}\n                  ></flip-icon-check-strong>\n                )}\n              </span>\n            </span>\n          )}\n          <span class=\"option-list-item__label\">{this.label}</span>\n          {showSelectionIcon && (\n            <span class=\"option-list-item__selection-icon\">\n              <flip-icon-check-small></flip-icon-check-small>\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-option-list-item/flip-option-list-item.stories.js

@@ -0,0 +1,26 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-option-list-item.mdx";
+export default {
+  component: "flip-option-list-item",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipOptionListItem",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  container.setAttribute("aria-label", "Option list");
+  container.setAttribute("role", "listbox");
+  const element = generateStoryElement("flip-option-list-item", args);
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const FlipOptionListItem = Template.bind({});
+FlipOptionListItem.args = {
+  icon: `<flip-icon-mention></flip-icon-mention>`,
+  label: "Option List Item",
+  value: "Value",
+};
+//# sourceMappingURL=flip-option-list-item.stories.js.map

package/dist/collection/components/flip-option-list-item/flip-option-list-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list-item/flip-option-list-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,6BAA6B,CAAC;AAE/C,eAAe;EACb,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,+BAA+B;CACvC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAEhD,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;EACpD,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;EAE1C,MAAM,OAAO,GAAG,oBAAoB,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;EAEpE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;EAExC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,kBAAkB,CAAC,IAAI,GAAG;EACxB,IAAI,EAAE,yCAAyC;EAC/C,KAAK,EAAE,kBAAkB;EACzB,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-option-list-item.mdx\";\n\nexport default {\n  component: \"flip-option-list-item\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipOptionListItem\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n\n  container.setAttribute(\"aria-label\", \"Option list\");\n  container.setAttribute(\"role\", \"listbox\");\n\n  const element = generateStoryElement(\"flip-option-list-item\", args);\n\n  container.append(\"\\n  \", element, \"\\n\");\n\n  return container;\n};\n\nexport const FlipOptionListItem = Template.bind({});\n\nFlipOptionListItem.args = {\n  icon: `<flip-icon-mention></flip-icon-mention>`,\n  label: \"Option List Item\",\n  value: \"Value\",\n};\n"]}

package/dist/collection/components/flip-option-list-section/flip-option-list-section.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.option-list-section {
+  background-color: var(--s-surface-overlay-default);
+}
+
+.option-list-section__label {
+  display: block;
+  width: 100%;
+  padding: var(--s-space-8) var(--s-space-16);
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  color: var(--s-text-subdued);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  text-align: left;
+}

package/dist/collection/components/flip-option-list-section/flip-option-list-section.js

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from "@stencil/core";
+/**
+ * @slot slot - The option list item components
+ */
+export class FlipOptionListSection {
+  render() {
+    return (h(Host, null,
+      h("div", { "aria-labelledby": "label", class: "option-list-section", role: "group" },
+        h("span", { class: "option-list-section__label", id: "label" }, this.label),
+        h("div", { class: "option-list-section__items" },
+          h("slot", null)))));
+  }
+  static get is() { return "flip-option-list-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-option-list-section.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-option-list-section.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=flip-option-list-section.js.map

package/dist/collection/components/flip-option-list-section/flip-option-list-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list-section.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list-section/flip-option-list-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,qBAAqB;EAGhC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,8BAAqB,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO;QACnE,YAAM,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,OAAO,IAChD,IAAI,CAAC,KAAK,CACN;QACP,WAAK,KAAK,EAAC,4BAA4B;UACrC,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * @slot slot - The option list item components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-option-list-section.css\",\n  tag: \"flip-option-list-section\",\n})\nexport class FlipOptionListSection {\n  @Prop() label!: string;\n\n  render() {\n    return (\n      <Host>\n        <div aria-labelledby=\"label\" class=\"option-list-section\" role=\"group\">\n          <span class=\"option-list-section__label\" id=\"label\">\n            {this.label}\n          </span>\n          <div class=\"option-list-section__items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-option-list-section/flip-option-list-section.stories.js

@@ -0,0 +1,29 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-option-list-section.mdx";
+export default {
+  component: "flip-option-list-section",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipOptionListSection",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  container.setAttribute("aria-label", "Option list");
+  container.setAttribute("role", "listbox");
+  const element = generateStoryElement("flip-option-list-section", args);
+  element.innerHTML = `
+    <flip-option-list-item label="This is an option" value="1"></flip-option-list-item>
+    <flip-option-list-item label="This is an option" selected="true" value="2"></flip-option-list-item>
+    <flip-option-list-item label="This is an option" value="3"></flip-option-list-item>
+  `;
+  container.append("\n  ", element, "\n");
+  return container;
+};
+export const FlipOptionListSection = Template.bind({});
+FlipOptionListSection.args = {
+  label: "Section label",
+};
+//# sourceMappingURL=flip-option-list-section.stories.js.map

package/dist/collection/components/flip-option-list-section/flip-option-list-section.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-option-list-section.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-option-list-section/flip-option-list-section.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,gCAAgC,CAAC;AAElD,eAAe;EACb,SAAS,EAAE,0BAA0B;EACrC,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,kCAAkC;CAC1C,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;EAEhD,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;EACpD,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;EAE1C,MAAM,OAAO,GAAG,oBAAoB,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAC;EAEvE,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;EAExC,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,qBAAqB,CAAC,IAAI,GAAG;EAC3B,KAAK,EAAE,eAAe;CACvB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-option-list-section.mdx\";\n\nexport default {\n  component: \"flip-option-list-section\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipOptionListSection\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n\n  container.setAttribute(\"aria-label\", \"Option list\");\n  container.setAttribute(\"role\", \"listbox\");\n\n  const element = generateStoryElement(\"flip-option-list-section\", args);\n\n  element.innerHTML = `\n    <flip-option-list-item label=\"This is an option\" value=\"1\"></flip-option-list-item>\n    <flip-option-list-item label=\"This is an option\" selected=\"true\" value=\"2\"></flip-option-list-item>\n    <flip-option-list-item label=\"This is an option\" value=\"3\"></flip-option-list-item>\n  `;\n\n  container.append(\"\\n  \", element, \"\\n\");\n\n  return container;\n};\n\nexport const FlipOptionListSection = Template.bind({});\n\nFlipOptionListSection.args = {\n  label: \"Section label\",\n};\n"]}

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

@@ -0,0 +1,72 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.pagination {
+  display: block;
+  width: 100%;
+}
+
+.pagination--variant-simple .pagination__list {
+    gap: var(--s-space-4);
+  }
+
+.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-8);
+}
+
+@media (--from-tablet) {
+
+.pagination__list {
+    gap: var(--s-space-16)
+}
+  }
+
+.pagination__advanced-label {
+  display: flex;
+  align-items: center;
+  gap: var(--s-space-8);
+  white-space: nowrap;
+}
+
+.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 {
+    outline-color: var(--s-focus-default);
+  }
+
+.pagination__page-select-icon {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+}

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

@@ -0,0 +1,270 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+import classnames from "classnames";
+export class FlipPagination {
+  constructor() {
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
+    this.onPrevButtonClick = () => {
+      const prevPage = Math.max(this.page - 1, 1);
+      if (this.page === prevPage) {
+        return;
+      }
+      this.setPage.emit(prevPage);
+    };
+    this.onNextButtonClick = () => {
+      const nextPage = Math.min(this.page + 1, this.pages);
+      if (this.page === nextPage) {
+        return;
+      }
+      this.setPage.emit(nextPage);
+    };
+    this.onSelect = (event) => {
+      const page = +event.target.value;
+      if (this.page === page) {
+        return;
+      }
+      this.setPage.emit(page);
+    };
+  }
+  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" },
+          h("li", { class: "pagination__list-item" },
+            h("flip-button", { class: "pagination__prev-button", disabled: this.page <= 1, flipAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-left></flip-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)
+                  .fill(undefined)
+                  .map((_, index) => index + 1)
+                  .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page)))),
+                h("flip-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("flip-visually-hidden", null,
+              h("span", { "aria-current": "page" }, ariaPageLabel)))),
+          h("li", { class: "pagination__list-item" },
+            h("flip-button", { class: "pagination__next-button", disabled: this.page >= this.pages, flipAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<flip-icon-chevron-right></flip-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+  }
+  static get is() { return "flip-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-pagination.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-pagination.css"]
+  }; }
+  static get properties() { return {
+    "accessibleNextButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accessible-next-button-label",
+      "reflect": false,
+      "defaultValue": "\"Next page\""
+    },
+    "accessiblePrevButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "accessible-prev-button-label",
+      "reflect": false,
+      "defaultValue": "\"Previous page\""
+    },
+    "nextButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "next-button-label",
+      "reflect": false,
+      "defaultValue": "\"Next\""
+    },
+    "pageLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page-label",
+      "reflect": false,
+      "defaultValue": "\"out of\""
+    },
+    "prevButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "prev-button-label",
+      "reflect": false,
+      "defaultValue": "\"Prev\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "page": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page",
+      "reflect": false
+    },
+    "pages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "pages",
+      "reflect": false
+    },
+    "pageSelectLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "page-select-label",
+      "reflect": false,
+      "defaultValue": "\"Select a page\""
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipPaginationVariant",
+        "resolved": "\"advanced\" | \"default\" | \"simple\"",
+        "references": {
+          "FlipPaginationVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "setPage",
+      "name": "setPage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+}
+//# sourceMappingURL=flip-pagination.js.map

package/dist/collection/components/flip-pagination/flip-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-pagination.js","sourceRoot":"","sources":["../../../../src/components/flip-pagination/flip-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipPaginationVariant = \"default\" | \"simple\" | \"advanced\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-pagination.css\",\n  tag: \"flip-pagination\",\n})\nexport class FlipPagination {\n  @Prop() accessibleNextButtonLabel?: string = \"Next page\";\n  @Prop() accessiblePrevButtonLabel?: string = \"Previous page\";\n  @Prop() nextButtonLabel?: string = \"Next\";\n  @Prop() pageLabel?: string = \"out of\";\n  @Prop() prevButtonLabel?: string = \"Prev\";\n  @Prop() label!: string;\n  @Prop() page!: number;\n  @Prop() pages!: number;\n  @Prop() pageSelectLabel?: string = \"Select a page\";\n  @Prop() variant?: FlipPaginationVariant = \"default\";\n\n  @Event() setPage: EventEmitter<number>;\n\n  private onPrevButtonClick = () => {\n    const prevPage = Math.max(this.page - 1, 1);\n\n    if (this.page === prevPage) {\n      return;\n    }\n\n    this.setPage.emit(prevPage);\n  };\n\n  private onNextButtonClick = () => {\n    const nextPage = Math.min(this.page + 1, this.pages);\n\n    if (this.page === nextPage) {\n      return;\n    }\n\n    this.setPage.emit(nextPage);\n  };\n\n  private onSelect = (event: Event) => {\n    const page = +(event.target as HTMLSelectElement).value;\n\n    if (this.page === page) {\n      return;\n    }\n\n    this.setPage.emit(page);\n  };\n\n  render() {\n    const hideButtonLabels = this.variant !== \"advanced\";\n    const showPageLabel = this.variant !== \"simple\";\n    const showDropDown = this.variant === \"advanced\";\n\n    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;\n\n    const className = classnames(\n      \"pagination\",\n      `pagination--variant-${this.variant}`\n    );\n\n    return (\n      <Host>\n        <nav aria-label={this.label} class={className}>\n          <ul class=\"pagination__list\">\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__prev-button\"\n                disabled={this.page <= 1}\n                flipAriaLabel={this.accessiblePrevButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-left></flip-icon-chevron-left>\"\n                intent=\"primary\"\n                label={this.prevButtonLabel}\n                onClick={this.onPrevButtonClick}\n              ></flip-button>\n            </li>\n            {showPageLabel ? (\n              <li class=\"pagination__list-item\">\n                <span>\n                  {showDropDown ? (\n                    <span\n                      aria-current=\"page\"\n                      class=\"pagination__advanced-label\"\n                    >\n                      <span class=\"pagination__page-select-container\">\n                        <select\n                          aria-label={this.pageSelectLabel}\n                          class=\"pagination__page-select\"\n                          onChange={this.onSelect}\n                        >\n                          {new Array(this.pages)\n                            .fill(undefined)\n                            .map((_, index) => index + 1)\n                            .map((page) => (\n                              <option\n                                selected={this.page === page}\n                                value={String(page)}\n                              >\n                                {page}\n                              </option>\n                            ))}\n                        </select>\n                        <flip-icon-expand-more\n                          aria-hidden=\"true\"\n                          class=\"pagination__page-select-icon\"\n                          size={16}\n                        ></flip-icon-expand-more>\n                      </span>\n                      <span aria-hidden=\"true\">\n                        {this.pageLabel} {this.pages}\n                      </span>\n                    </span>\n                  ) : (\n                    <span aria-current=\"page\">{ariaPageLabel}</span>\n                  )}\n                </span>\n              </li>\n            ) : (\n              <li class=\"pagination__list-item\">\n                <flip-visually-hidden>\n                  <span aria-current=\"page\">{ariaPageLabel}</span>\n                </flip-visually-hidden>\n              </li>\n            )}\n            <li class=\"pagination__list-item\">\n              <flip-button\n                class=\"pagination__next-button\"\n                disabled={this.page >= this.pages}\n                flipAriaLabel={this.accessibleNextButtonLabel}\n                hideLabel={hideButtonLabels}\n                icon=\"<flip-icon-chevron-right></flip-icon-chevron-right>\"\n                iconPosition=\"end\"\n                intent=\"primary\"\n                label={this.nextButtonLabel}\n                onClick={this.onNextButtonClick}\n              ></flip-button>\n            </li>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-pagination/flip-pagination.stories.js

@@ -0,0 +1,22 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-pagination.mdx";
+export default {
+  component: "flip-pagination",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipPagination",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-pagination", args);
+  return element;
+};
+export const FlipPagination = Template.bind({});
+FlipPagination.args = {
+  label: "Pagination",
+  page: 1,
+  pages: 20,
+};
+//# sourceMappingURL=flip-pagination.stories.js.map

package/dist/collection/components/flip-pagination/flip-pagination.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-pagination.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-pagination/flip-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,eAAe;EACb,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;EAE9D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG;EACpB,KAAK,EAAE,YAAY;EACnB,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,EAAE;CACV,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-pagination.mdx\";\n\nexport default {\n  component: \"flip-pagination\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipPagination\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-pagination\", args);\n\n  return element;\n};\n\nexport const FlipPagination = Template.bind({});\n\nFlipPagination.args = {\n  label: \"Pagination\",\n  page: 1,\n  pages: 20,\n};\n"]}

package/dist/collection/components/flip-popover/flip-popover.css

@@ -148,7 +148,7 @@
 @media (min-width: 768px) {
 
 .popover__scroll-container {
-    max-height: 19rem;
+    max-height: 22rem;
     padding-top: var(--s-space-8);
     padding-bottom: var(--s-space-8)
 }