@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/collection-manifest.json

@@ -10,12 +10,20 @@
     "./components/flip-checkbox/flip-checkbox.js",
     "./components/flip-chip/flip-chip.js",
     "./components/flip-dialog/flip-dialog.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-pdf/flip-file-viewer-pdf.js",
+    "./components/flip-form-group/flip-form-group.js",
+    "./components/flip-heading/flip-heading.js",
     "./components/flip-inline-error/flip-inline-error.js",
     "./components/flip-link/flip-link.js",
+    "./components/flip-option-list-item/flip-option-list-item.js",
+    "./components/flip-pagination/flip-pagination.js",
+    "./components/flip-progress-indicator/flip-progress-indicator.js",
     "./components/flip-radio/flip-radio.js",
     "./components/flip-spinner/flip-spinner.js",
     "./components/flip-switch/flip-switch.js",
     "./components/flip-tag/flip-tag.js",
+    "./components/flip-text/flip-text.js",
+    "./components/flip-text-input/flip-text-input.js",
     "./components/flip-theme-provider/flip-theme-provider.js",
     "./components/flip-thumbnail/flip-thumbnail.js",
     "./components/flip-toast/flip-toast.js",
@@ -24,15 +32,27 @@
     "./components/flip-action-list/flip-action-list.js",
     "./components/flip-action-list-section/flip-action-list-section.js",
     "./components/flip-avatar-group/flip-avatar-group.js",
+    "./components/flip-date-input/flip-date-input.js",
+    "./components/flip-date-picker/flip-date-picker.js",
     "./components/flip-description-list/flip-description-list.js",
     "./components/flip-description-list-item/flip-description-list-item.js",
+    "./components/flip-empty-state/flip-empty-state.js",
     "./components/flip-file-uploader/flip-file-uploader.js",
+    "./components/flip-file-viewer/flip-file-viewer.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-audio/flip-file-viewer-audio.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-csv/flip-file-viewer-csv.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-image/flip-file-viewer-image.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-text/flip-file-viewer-text.js",
+    "./components/flip-file-viewer/viewers/flip-file-viewer-video/flip-file-viewer-video.js",
+    "./components/flip-form-control/flip-form-control.js",
     "./components/flip-icon/icons/flip-icon-add-photo.js",
     "./components/flip-icon/icons/flip-icon-add.js",
     "./components/flip-icon/icons/flip-icon-admin-panel-settings.js",
     "./components/flip-icon/icons/flip-icon-arrow-back.js",
     "./components/flip-icon/icons/flip-icon-arrow-forward.js",
+    "./components/flip-icon/icons/flip-icon-arrow-left.js",
     "./components/flip-icon/icons/flip-icon-arrow-right-small.js",
+    "./components/flip-icon/icons/flip-icon-arrow-right.js",
     "./components/flip-icon/icons/flip-icon-attachment.js",
     "./components/flip-icon/icons/flip-icon-cancel.js",
     "./components/flip-icon/icons/flip-icon-chat-bubble.js",
@@ -59,6 +79,8 @@
     "./components/flip-icon/icons/flip-icon-expand-more.js",
     "./components/flip-icon/icons/flip-icon-file.js",
     "./components/flip-icon/icons/flip-icon-folder-shared.js",
+    "./components/flip-icon/icons/flip-icon-fullscreen-exit.js",
+    "./components/flip-icon/icons/flip-icon-fullscreen.js",
     "./components/flip-icon/icons/flip-icon-group-assign.js",
     "./components/flip-icon/icons/flip-icon-groups-custom.js",
     "./components/flip-icon/icons/flip-icon-groups.js",
@@ -78,12 +100,15 @@
     "./components/flip-icon/icons/flip-icon-notifications-active.js",
     "./components/flip-icon/icons/flip-icon-notifications-off.js",
     "./components/flip-icon/icons/flip-icon-notifications.js",
+    "./components/flip-icon/icons/flip-icon-open-in-new.js",
     "./components/flip-icon/icons/flip-icon-people-alt.js",
     "./components/flip-icon/icons/flip-icon-person-off.js",
     "./components/flip-icon/icons/flip-icon-person.js",
     "./components/flip-icon/icons/flip-icon-phone.js",
     "./components/flip-icon/icons/flip-icon-poll.js",
+    "./components/flip-icon/icons/flip-icon-print.js",
     "./components/flip-icon/icons/flip-icon-recieved.js",
+    "./components/flip-icon/icons/flip-icon-remove.js",
     "./components/flip-icon/icons/flip-icon-search-strong.js",
     "./components/flip-icon/icons/flip-icon-search.js",
     "./components/flip-icon/icons/flip-icon-send.js",
@@ -96,6 +121,10 @@
     "./components/flip-icon/icons/flip-icon-visibility-off.js",
     "./components/flip-icon/icons/flip-icon-visibility.js",
     "./components/flip-icon/icons/flip-icon-warning.js",
+    "./components/flip-list/flip-list.js",
+    "./components/flip-modal/flip-modal.js",
+    "./components/flip-option-list/flip-option-list.js",
+    "./components/flip-option-list-section/flip-option-list-section.js",
     "./components/flip-popover/flip-popover.js",
     "./components/flip-radio-group/flip-radio-group.js",
     "./components/flip-resource-list/flip-resource-list.js",
@@ -104,6 +133,7 @@
     "./components/flip-search/flip-search.js",
     "./components/flip-tab/flip-tab.js",
     "./components/flip-tabs/flip-tabs.js",
+    "./components/flip-video-thumbnail/flip-video-thumbnail.js",
     "./components/flip-visually-hidden/flip-visually-hidden.js"
   ],
   "compiler": {

package/dist/collection/components/flip-action-list/flip-action-list.js

@@ -52,3 +52,4 @@ export class FlipActionList {
   }; }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=flip-action-list.js.map

package/dist/collection/components/flip-action-list/flip-action-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list/flip-action-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,cAAc;EAL3B;IAcU,cAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC3C,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;IACH,CAAC,CAAC;GAwCH;EApDC,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;EAClE,CAAC;EAYO,aAAa;IACnB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG,CAAC,eAAe,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAE3D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;EAC/B,CAAC;EAEO,iBAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GACZ,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,GAAG,CAAC,CAAC;IAEtE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;EAC/B,CAAC;EAEO,kBAAkB;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CACzB,CAAC,IAAI,EAAE,EAAE;;MACP,OAAA,IAAI,KAAK,QAAQ,CAAC,aAAa;QAC/B,IAAI;WACF,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAA,CAAA;KAAA,CAC3E,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,+BACmB,UAAU,EAC3B,KAAK,EAAC,aAAa,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,MAAM;QAEX,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from \"@stencil/core\";\nimport { querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The action list items and sections\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list.css\",\n  tag: \"flip-action-list\",\n})\nexport class FlipActionList {\n  @Element() el: HTMLElement;\n\n  private items: HTMLElement[];\n\n  componentDidLoad() {\n    this.items = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowDown\" || event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.focusNextItem();\n    } else if (event.code === \"ArrowUp\" || event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.focusPreviousItem();\n    }\n  };\n\n  private focusNextItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex = (activeItemIndex + 1) % this.items.length;\n\n    this.items[newIndex].focus();\n  }\n\n  private focusPreviousItem() {\n    const activeItemIndex = this.getActiveItemIndex();\n    const newIndex =\n      activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;\n\n    this.items[newIndex].focus();\n  }\n\n  private getActiveItemIndex(): number {\n    return this.items.findIndex(\n      (item) =>\n        item === document.activeElement ||\n        item ===\n          document.activeElement?.shadowRoot?.querySelector('[role=\"menuitem\"]')\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          aria-orientation=\"vertical\"\n          class=\"action-list\"\n          onKeyDown={this.onKeyDown}\n          role=\"menu\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-action-list/flip-action-list.stories.js

@@ -20,3 +20,4 @@ const Template = (args) => {
 };
 export const FlipActionList = Template.bind({});
 FlipActionList.args = {};
+//# sourceMappingURL=flip-action-list.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list/flip-action-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,eAAe;EACb,SAAS,EAAE,kBAAkB;EAC7B,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,kBAAkB,EAAE,IAAI,CAAC,CAAC;EAE/D,OAAO,CAAC,SAAS,GAAG;;;;GAInB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,cAAc,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-action-list.mdx\";\n\nexport default {\n  component: \"flip-action-list\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipActionList\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-action-list\", args);\n\n  element.innerHTML = `\n    <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 1\"></flip-action-list-item>\n    <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 2\"></flip-action-list-item>\n    <flip-action-list-item icon=\"<flip-icon-mention></flip-icon-mention>\" label=\"Action item 3\"></flip-action-list-item>\n  `;\n\n  return element;\n};\n\nexport const FlipActionList = Template.bind({});\n\nFlipActionList.args = {};\n"]}

package/dist/collection/components/flip-action-list-item/flip-action-list-item.js

@@ -156,3 +156,4 @@ export class FlipActionListItem {
     }
   }; }
 }
+//# sourceMappingURL=flip-action-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list-item.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list-item/flip-action-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;AAWpC,MAAM,OAAO,kBAAkB;EAL/B;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,cACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ;QAEZ,IAAI,CAAC,IAAI,IAAI,CACZ,YAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE;QACD,YAAM,KAAK,EAAC,mCAAmC;UAC7C,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ;UACxD,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI;QACN,UAAU,IAAI,CACb,YACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" | \"critical\";\n\nexport type FlipActionListItemSize = \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-item.css\",\n  tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n  @Prop() disabled?: boolean;\n  @Prop() description?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipActionListItemIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() size?: FlipActionListItemSize = \"m\";\n  @Prop() suffix?: string;\n\n  render() {\n    const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n    const className = classnames(\n      \"action-list-item\",\n      `action-list-item--intent-${this.intent}`,\n      `action-list-item--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <button\n          class={className}\n          disabled={this.disabled}\n          role=\"menuitem\"\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {this.icon && (\n            <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n          )}\n          <span class=\"action-list-item__label-container\">\n            <span class=\"action-list-item__label\">{this.label}</span>\n            {this.description && (\n              <span class=\"action-list-item__description\">\n                {this.description}\n              </span>\n            )}\n          </span>\n          {showSuffix && (\n            <span\n              class=\"action-list-item__suffix\"\n              innerHTML={this.suffix}\n            ></span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -28,3 +28,4 @@ FlipActionListItem.args = {
   label: "This is an action",
   suffix: `<flip-icon-chevron-right></flip-icon-chevron-right>`,
 };
+//# sourceMappingURL=flip-action-list-item.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list-item.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list-item/flip-action-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,CAAC,KAAK,EAAE,EAAE;MACR,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAEhD,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;MACvC,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;MAE1B,OAAO,SAAS,CAAC;IACnB,CAAC;GACF;EACD,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,OAAO,GAAG,oBAAoB,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;EAEpE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpD,kBAAkB,CAAC,IAAI,GAAG;EACxB,WAAW,EAAE,qCAAqC;EAClD,IAAI,EAAE,yCAAyC;EAC/C,KAAK,EAAE,mBAAmB;EAC1B,MAAM,EAAE,qDAAqD;CAC9D,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-action-list-item.mdx\";\n\nexport default {\n  component: \"flip-action-list-item\",\n  decorators: [\n    (story) => {\n      const container = document.createElement(\"div\");\n\n      container.setAttribute(\"role\", \"menu\");\n      container.append(story());\n\n      return container;\n    },\n  ],\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipActionListItem\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-action-list-item\", args);\n\n  return element;\n};\n\nexport const FlipActionListItem = Template.bind({});\n\nFlipActionListItem.args = {\n  description: \"Description of the action list item\",\n  icon: `<flip-icon-mention></flip-icon-mention>`,\n  label: \"This is an action\",\n  suffix: `<flip-icon-chevron-right></flip-icon-chevron-right>`,\n};\n"]}

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

@@ -38,3 +38,4 @@ export class FlipActionListSection {
     }
   }; }
 }
+//# sourceMappingURL=flip-action-list-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list-section.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list-section/flip-action-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 action list item components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-action-list-section.css\",\n  tag: \"flip-action-list-section\",\n})\nexport class FlipActionListSection {\n  @Prop() label!: string;\n\n  render() {\n    return (\n      <Host>\n        <div aria-labelledby=\"label\" class=\"action-list-section\" role=\"group\">\n          <span class=\"action-list-section__label\" id=\"label\">\n            {this.label}\n          </span>\n          <div class=\"action-list-section__items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -25,3 +25,4 @@ export const FlipActionListSection = Template.bind({});
 FlipActionListSection.args = {
   label: "Section label",
 };
+//# sourceMappingURL=flip-action-list-section.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-action-list-section.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-action-list-section/flip-action-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,MAAM,EAAE,MAAM,CAAC,CAAC;EAEvC,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-action-list-section.mdx\";\n\nexport default {\n  component: \"flip-action-list-section\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipActionListSection\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"div\");\n\n  container.setAttribute(\"role\", \"menu\");\n\n  const element = generateStoryElement(\"flip-action-list-section\", args);\n\n  element.innerHTML = `\n    <flip-action-list-item label=\"This is an action\"></flip-action-list-item>\n    <flip-action-list-item label=\"This is an action\"></flip-action-list-item>\n    <flip-action-list-item label=\"This is an action\"></flip-action-list-item>\n  `;\n\n  container.append(\"\\n  \", element, \"\\n\");\n\n  return container;\n};\n\nexport const FlipActionListSection = Template.bind({});\n\nFlipActionListSection.args = {\n  label: \"Section label\",\n};\n"]}

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

@@ -276,3 +276,4 @@ export class FlipAvatar {
       "methodName": "watchSrcProp"
     }]; }
 }
+//# sourceMappingURL=flip-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-avatar.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar/flip-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" | \"top\";\nexport type FlipAvatarSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";\nexport type FlipAvatarVariant = \"round\" | \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n  xs: 28,\n  s: 32,\n  m: 40,\n  l: 48,\n  xl: 64,\n  \"2xl\": 144,\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar.css\",\n  tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n  @Element() element: HTMLElement;\n\n  @Prop() badge?: string;\n  @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n  @Prop() icon?: string;\n  @Prop() initials?: string;\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n  @Prop() showLabel?: boolean = false;\n  @Prop() size?: FlipAvatarSize = \"m\";\n  @Prop() src?: string;\n  @Prop() variant?: FlipAvatarVariant = \"round\";\n\n  @State() imageAvailable: boolean | undefined;\n\n  @Watch(\"src\")\n  watchSrcProp() {\n    this.imageAvailable = undefined;\n  }\n\n  private setImageAvailable = () => {\n    this.imageAvailable = true;\n  };\n\n  private setImageUnavailable = () => {\n    this.imageAvailable = false;\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    // The interactive avatar is activated by the space key on the keyup event,\n    // but the default action for space is already triggered on keydown. It\n    // needs to be prevented to stop scrolling the page before activating the\n    // avatar.\n    if (event.code === \"Space\") {\n      event.preventDefault();\n    } else if (event.code === \"Enter\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  private onKeyup = (event: KeyboardEvent) => {\n    if (event.code === \"Space\") {\n      event.preventDefault();\n\n      this.element.click();\n    }\n  };\n\n  render() {\n    const showImage =\n      Boolean(this.src) &&\n      (this.imageAvailable || this.imageAvailable === undefined);\n\n    const showInitials = !showImage && Boolean(this.initials);\n    const showIcon = !showImage && !showInitials && Boolean(this.icon);\n    const showFallbackIcon = !showImage && !showInitials && !showIcon;\n    const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n    const role = this.interactive ? \"button\" : \"img\";\n\n    const className = classnames(\n      \"avatar\",\n      `avatar--size-${this.size}`,\n      `avatar--variant-${this.variant}`,\n      {\n        \"avatar--has-icon\": showIcon || showFallbackIcon,\n        \"avatar--has-initials\": showInitials,\n        \"avatar--interactive\": this.interactive,\n      }\n    );\n\n    const badgeClassName = classnames(\n      \"avatar__badge\",\n      `avatar__badge--position-${this.badgePosition}`\n    );\n\n    return (\n      <Host\n        aria-label={this.label}\n        onKeydown={this.interactive ? this.onKeydown : undefined}\n        onKeyup={this.interactive ? this.onKeyup : undefined}\n        role={role}\n        tabIndex={this.interactive ? 0 : undefined}\n      >\n        <span class={className} part=\"avatar\">\n          {showImage && (\n            <span class=\"avatar__image\">\n              <img\n                alt=\"\"\n                height={flipAvatarSizeMappings[this.size]}\n                onError={this.setImageUnavailable}\n                onLoad={this.setImageAvailable}\n                src={this.src}\n                width={flipAvatarSizeMappings[this.size]}\n              />\n            </span>\n          )}\n          {showInitials && (\n            <span class=\"avatar__initials\">\n              <span>{this.initials}</span>\n            </span>\n          )}\n          {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n          {showFallbackIcon && (\n            <span class=\"avatar__icon\">\n              <flip-icon-person></flip-icon-person>\n            </span>\n          )}\n          {showBadge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </span>\n\n        {this.showLabel && (\n          <span aria-hidden class=\"avatar__label\">\n            {this.label}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -38,3 +38,4 @@ FlipAvatar.args = {
   label: "John Doe",
   src: "https://picsum.photos/id/433/144/144",
 };
+//# sourceMappingURL=flip-avatar.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-avatar.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar/flip-avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,eAAe;EACb,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,WAAW,EAAE,gCAAgC;MAC7C,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EACJ,+EAA+E;UACjF,OAAO,EAAE,YAAY;SACtB;OACF;KACF;IACD,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,0CAA0C;UAClD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,KAAK,EACH,0EAA0E;EAC5E,KAAK,EAAE,UAAU;EACjB,GAAG,EAAE,sCAAsC;CAC5C,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-avatar.mdx\";\n\nexport default {\n  argTypes: {\n    badge: {\n      description: 'Visible with default size \"m\".',\n      table: {\n        type: {\n          detail:\n            'e.g. <flip-badge aria-label=\"3 new messages\" label=\"3\" size=\"s\"></flip-badge>',\n          summary: \"flip-badge\",\n        },\n      },\n    },\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-close></flip-icon-close>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-avatar\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipAvatar\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-avatar\", args);\n\n  return element;\n};\n\nexport const FlipAvatar = Template.bind({});\n\nFlipAvatar.args = {\n  badge:\n    '<flip-badge aria-label=\"3 new messages\" label=\"3\" size=\"s\"></flip-badge>',\n  label: \"John Doe\",\n  src: \"https://picsum.photos/id/433/144/144\",\n};\n"]}

package/dist/collection/components/flip-avatar-group/flip-avatar-group.js

@@ -42,3 +42,4 @@ export class FlipAvatarGroup {
     }
   }; }
 }
+//# sourceMappingURL=flip-avatar-group.js.map

package/dist/collection/components/flip-avatar-group/flip-avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-avatar-group.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar-group/flip-avatar-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;GAEG;AAMH,MAAM,OAAO,eAAe;EAG1B,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO;QACjC,eAAa;QACZ,IAAI,CAAC,KAAK,IAAI,CACb,YAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - Your avatar components\n */\n@Component({\n  shadow: true,\n  styleUrl: \"flip-avatar-group.css\",\n  tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n  @Prop() badge?: string;\n\n  render() {\n    const className = classnames(\"avatar-group\", {\n      \"avatar-group--has-badge\": Boolean(this.badge),\n    });\n\n    const badgeClassName = classnames(\"avatar-group__badge\");\n\n    return (\n      <Host>\n        <div class={className} role=\"group\">\n          <slot></slot>\n          {this.badge && (\n            <span class={badgeClassName} innerHTML={this.badge}></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-avatar-group/flip-avatar-group.stories.js

@@ -31,3 +31,4 @@ export const FlipAvatarGroup = Template.bind({});
 FlipAvatarGroup.args = {
   badge: `<flip-badge aria-label="3 new messages" label="3"></flip-badge>`,
 };
+//# sourceMappingURL=flip-avatar-group.stories.js.map

package/dist/collection/components/flip-avatar-group/flip-avatar-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-avatar-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-avatar-group/flip-avatar-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EACJ,8EAA8E;UAChF,OAAO,EAAE,YAAY;SACtB;OACF;KACF;GACF;EACD,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAEhE,OAAO,CAAC,SAAS,GAAG;;;GAGnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG;EACrB,KAAK,EAAE,iEAAiE;CACzE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-avatar-group.mdx\";\n\nexport default {\n  argTypes: {\n    badge: {\n      table: {\n        type: {\n          detail:\n            'e.g. <flip-badge aria-label=\"3 new messages\" label=\"3\" size=\"s\"><flip-badge>',\n          summary: \"flip-badge\",\n        },\n      },\n    },\n  },\n  component: \"flip-avatar-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipAvatarGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-avatar-group\", args);\n\n  element.innerHTML = `\n    <flip-avatar label=\"Jane Doe\" src=\"https://avatars.dicebear.com/api/adventurer-neutral/a.svg?size=144\" size=\"s\"></flip-avatar>\n    <flip-avatar label=\"John Doe\" src=\"https://avatars.dicebear.com/api/adventurer-neutral/b.svg?size=144\" size=\"s\"></flip-avatar>\n  `;\n\n  return element;\n};\n\nexport const FlipAvatarGroup = Template.bind({});\n\nFlipAvatarGroup.args = {\n  badge: `<flip-badge aria-label=\"3 new messages\" label=\"3\"></flip-badge>`,\n};\n"]}

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

@@ -126,3 +126,4 @@ export class FlipBadge {
     }
   }; }
 }
+//# sourceMappingURL=flip-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-badge.js","sourceRoot":"","sources":["../../../../src/components/flip-badge/flip-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAqBzD,MAAM,OAAO,SAAS;EALtB;IAOU,WAAM,GAAqB,UAAU,CAAC;IAEtC,SAAI,GAAmB,GAAG,CAAC;IAC3B,YAAO,GAAsB,SAAS,CAAC;GAwBhD;EAtBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,OAAO,EACP,iBAAiB,IAAI,CAAC,MAAM,EAAE,EAC9B,eAAe,IAAI,CAAC,IAAI,EAAE,EAC1B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC;MACE,iBAAiB,EAAE,IAAI,CAAC,IAAI;KAC7B,CACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ;MACjB,YAAM,KAAK,EAAE,SAAS;QACnB,IAAI,CAAC,IAAI,IAAI,YAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS;QACpE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/C,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import classnames from \"classnames\";\n\nimport { Component, h, Host, Prop } from \"@stencil/core\";\n\nexport type FlipBadgeIntent =\n  | \"critical\"\n  | \"decorative-1\"\n  | \"decorative-2\"\n  | \"decorative-3\"\n  | \"decorative-4\"\n  | \"decorative-5\"\n  | \"decorative-6\"\n  | \"decorative-7\";\n\nexport type FlipBadgeSize = \"s\" | \"m\";\n\nexport type FlipBadgeVariant = \"default\" | \"dot\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-badge.css\",\n  tag: \"flip-badge\",\n})\nexport class FlipBadge {\n  @Prop() icon?: string;\n  @Prop() intent?: FlipBadgeIntent = \"critical\";\n  @Prop() label!: string;\n  @Prop() size?: FlipBadgeSize = \"m\";\n  @Prop() variant?: FlipBadgeVariant = \"default\";\n\n  render() {\n    const className = classnames(\n      \"badge\",\n      `badge--intent-${this.intent}`,\n      `badge--size-${this.size}`,\n      `badge--variant-${this.variant}`,\n      {\n        \"badge--has-icon\": this.icon,\n      }\n    );\n\n    return (\n      <Host role=\"status\">\n        <span class={className}>\n          {this.icon && <span class=\"badge__icon\" innerHTML={this.icon}></span>}\n          {this.icon === undefined && (\n            <span class=\"badge__label\">{this.label}</span>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -29,3 +29,4 @@ FlipBadge.args = {
   "aria-label": "3 new messages",
   label: "3",
 };
+//# sourceMappingURL=flip-badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-badge.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-badge/flip-badge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,aAAa;AACb,OAAO,IAAI,MAAM,kBAAkB,CAAC;AAEpC,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,0CAA0C;UAClD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,YAAY;EACvB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;EACf,YAAY,EAAE,gBAAgB;EAC9B,KAAK,EAAE,GAAG;CACX,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\n// @ts-ignore\nimport Docs from \"./flip-badge.mdx\";\n\nexport default {\n  argTypes: {\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-close></flip-icon-close>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-badge\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipBadge\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-badge\", args);\n\n  return element;\n};\n\nexport const FlipBadge = Template.bind({});\n\nFlipBadge.args = {\n  \"aria-label\": \"3 new messages\",\n  label: \"3\",\n};\n"]}

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

@@ -220,3 +220,4 @@ export class FlipBanner {
     }]; }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=flip-banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-banner.js","sourceRoot":"","sources":["../../../../src/components/flip-banner/flip-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,qBAAqB,GAA0C;EACnE,OAAO,EAAE,SAAS;EAClB,QAAQ,EAAE,qCAAqC;EAC/C,OAAO,EAAE,mDAAmD;EAC5D,OAAO,EAAE,yCAAyC;EAClD,IAAI,EAAE,mCAAmC;CAC1C,CAAC;AAOF,MAAM,OAAO,UAAU;EALvB;IAUU,gBAAW,GAAa,KAAK,CAAC;IAC9B,iBAAY,GAAY,SAAS,CAAC;IAClC,eAAU,GAAwB,QAAQ,CAAC;IAC3C,WAAM,GAAsB,SAAS,CAAC;IACtC,aAAQ,GAAa,KAAK,CAAC;IAKnC,aAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,cAAS,GAAG,CAAC,KAAiB,EAAE,EAAE;MAChC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC;GAwDH;EAtDC,MAAM;IACJ,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAAE;MACtE,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,+BACmB,SAAS,EAC1B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC;QAEV,QAAQ,IAAI,CACX,2BACc,MAAM,EAClB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,GACT,CACT;QACD,YAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAC,SAAS,IACvC,IAAI,CAAC,OAAO,CACR;QACN,YAAY,IAAI,CACf,YAAM,KAAK,EAAC,kBAAkB;UAC3B,IAAI,CAAC,WAAW,IAAI,CACnB,cACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,WAAW,CACV,CACV;UACA,IAAI,CAAC,WAAW,IAAI,CACnB,4BACc,IAAI,CAAC,YAAY,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ;YAEb,0BAAmC,CAC5B,CACV,CACI,CACR,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipBannerAriaRole = \"alert\" | \"status\";\n\nexport type FlipBannerIntent =\n  | \"default\"\n  | \"critical\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\nconst flipBannerIconMapping: { [key in FlipBannerIntent]: string } = {\n  default: undefined,\n  critical: \"<flip-icon-error></flip-icon-error>\",\n  success: \"<flip-icon-check-circle></flip-icon-check-circle>\",\n  warning: \"<flip-icon-warning></flip-icon-warning>\",\n  info: \"<flip-icon-info></flip-icon-info>\",\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-banner.css\",\n  tag: \"flip-banner\",\n})\nexport class FlipBanner {\n  @Element() element: HTMLElement;\n\n  @Prop() actionLabel?: string;\n  @Prop() content!: string;\n  @Prop() dismissable?: boolean = false;\n  @Prop() dismissLabel?: string = \"Dismiss\";\n  @Prop() importance?: FlipBannerAriaRole = \"status\";\n  @Prop() intent?: FlipBannerIntent = \"default\";\n  @Prop() showIcon?: boolean = false;\n\n  @Event() action?: EventEmitter<MouseEvent>;\n  @Event() dismiss?: EventEmitter<MouseEvent>;\n\n  onAction = (event: MouseEvent) => {\n    this.action.emit(event);\n  };\n\n  onDismiss = (event: MouseEvent) => {\n    this.dismiss.emit(event);\n  };\n\n  render() {\n    const icon = flipBannerIconMapping[this.intent];\n    const showControls = Boolean(this.actionLabel) || this.dismissable;\n    const showIcon = this.showIcon && Boolean(icon);\n\n    const className = classnames(\"banner\", `banner--intent-${this.intent}`, {\n      \"banner--has-icon\": showIcon,\n    });\n\n    return (\n      <Host>\n        <div\n          aria-describedby=\"content\"\n          class={className}\n          role={this.importance}\n          tabIndex={0}\n        >\n          {showIcon && (\n            <span\n              aria-hidden=\"true\"\n              class=\"banner__icon\"\n              innerHTML={icon}\n            ></span>\n          )}\n          <span class=\"banner__content\" id=\"content\">\n            {this.content}\n          </span>\n          {showControls && (\n            <span class=\"banner__controls\">\n              {this.actionLabel && (\n                <button\n                  class=\"banner__action-button\"\n                  onClick={this.onAction}\n                  type=\"button\"\n                >\n                  {this.actionLabel}\n                </button>\n              )}\n              {this.dismissable && (\n                <button\n                  aria-label={this.dismissLabel}\n                  class=\"banner__dismiss-button\"\n                  onClick={this.onDismiss}\n                  type=\"button\"\n                >\n                  <flip-icon-close></flip-icon-close>\n                </button>\n              )}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -20,3 +20,4 @@ FlipBanner.args = {
   dismissable: true,
   intent: "critical",
 };
+//# sourceMappingURL=flip-banner.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-banner.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-banner/flip-banner.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,eAAe;EACb,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,WAAW,EAAE,QAAQ;EACrB,OAAO,EACL,6JAA6J;EAC/J,WAAW,EAAE,IAAI;EACjB,MAAM,EAAE,UAAU;CACnB,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-banner.mdx\";\n\nexport default {\n  component: \"flip-banner\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipBanner\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-banner\", args);\n\n  return element;\n};\n\nexport const FlipBanner = Template.bind({});\n\nFlipBanner.args = {\n  actionLabel: \"Action\",\n  content:\n    \"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.\",\n  dismissable: true,\n  intent: \"critical\",\n};\n"]}

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

@@ -39,7 +39,7 @@
     cursor: default;
   }
 
-.button:disabled .button__left-icon {
+.button:disabled .button__icon {
       color: var(--s-icon-disabled);
     }
 
@@ -51,7 +51,7 @@
     color: var(--s-text-highlight);
   }
 
-.button--variant-ghost.button--intent-primary:not(:disabled) .button__left-icon {
+.button--variant-ghost.button--intent-primary:not(:disabled) .button__icon {
       color: var(--s-icon-highlight);
     }
 
@@ -59,7 +59,7 @@
     color: var(--s-text-critical);
   }
 
-.button--variant-ghost.button--intent-critical:not(:disabled) .button__left-icon {
+.button--variant-ghost.button--intent-critical:not(:disabled) .button__icon {
       color: var(--s-icon-critical);
     }
 
@@ -101,11 +101,11 @@
       background-color: var(--s-action-primary-pressed);
     }
 
-.button--variant-flat.button--intent-primary:not(:disabled) .button__left-icon {
+.button--variant-flat.button--intent-primary:not(:disabled) .button__icon {
       color: var(--s-icon-on-action-primary);
     }
 
-.button--variant-flat .button__left-icon {
+.button--variant-flat .button__icon {
     color: var(--s-icon-strong);
   }
 
@@ -123,7 +123,7 @@
     text-underline-offset: var(--s-space-4);
   }
 
-.button--variant-plain:hover:not(:disabled) .button__left-icon {
+.button--variant-plain:hover:not(:disabled) .button__icon {
       color: var(--s-interactive-neutral-default);
     }
 
@@ -132,7 +132,7 @@
     background-color: transparent;
   }
 
-.button--variant-plain:active:not(:disabled) .button__left-icon {
+.button--variant-plain:active:not(:disabled) .button__icon {
       color: var(--s-interactive-neutral-hovered);
     }
 
@@ -141,7 +141,7 @@
     background-color: transparent;
   }
 
-.button--variant-plain:disabled .button__left-icon {
+.button--variant-plain:disabled .button__icon {
       color: var(--s-interactive-neutral-disabled);
     }
 
@@ -153,7 +153,7 @@
       color: var(--s-interactive-primary-default);
     }
 
-.button--variant-plain.button--intent-primary:hover .button__left-icon {
+.button--variant-plain.button--intent-primary:hover .button__icon {
         color: var(--s-interactive-primary-default);
       }
 
@@ -161,7 +161,7 @@
       color: var(--s-interactive-primary-hovered);
     }
 
-.button--variant-plain.button--intent-primary:active .button__left-icon {
+.button--variant-plain.button--intent-primary:active .button__icon {
         color: var(--s-interactive-primary-hovered);
       }
 
@@ -169,15 +169,15 @@
       color: var(--s-interactive-primary-disabled);
     }
 
-.button--variant-plain.button--intent-primary:disabled .button__left-icon {
+.button--variant-plain.button--intent-primary:disabled .button__icon {
         color: var(--s-interactive-primary-disabled);
       }
 
-.button--variant-plain.button--intent-primary .button__left-icon {
+.button--variant-plain.button--intent-primary .button__icon {
       color: var(--s-interactive-primary-default);
     }
 
-.button--variant-plain .button__left-icon {
+.button--variant-plain .button__icon {
     color: var(--s-interactive-neutral-default);
   }
 
@@ -203,11 +203,11 @@
       rgba(255, 255, 255, 0.3);
   }
 
-.button--variant-on-image:disabled .button__left-icon {
+.button--variant-on-image:disabled .button__icon {
       color: var(--s-icon-on-image);
     }
 
-.button--variant-on-image .button__left-icon {
+.button--variant-on-image .button__icon {
     color: var(--s-icon-on-image);
   }
 
@@ -252,31 +252,39 @@
       color: var(--s-text-on-action-primary);
     }
 
-.button--variant-floating.button--intent-primary:disabled .button__left-icon {
+.button--variant-floating.button--intent-primary:disabled .button__icon {
         color: var(--s-icon-on-action-primary);
       }
 
-.button--variant-floating.button--intent-primary .button__left-icon {
+.button--variant-floating.button--intent-primary .button__icon {
       color: var(--s-icon-on-action-primary);
     }
 
-.button--variant-floating .button__left-icon {
+.button--variant-floating .button__icon {
     color: var(--s-icon-strong);
   }
 
+.button--icon-position-end .button__icon {
+    margin-right: calc(-1 * var(--s-space-4));
+    margin-left: 0;
+    order: 2;
+  }
+
 .button--icon-only {
   padding: var(--s-space-8);
   border-radius: 50%;
 }
 
-.button--icon-only .button__left-icon {
+.button--icon-only .button__icon {
+    margin-right: 0;
     margin-left: 0;
   }
 
-.button__left-icon {
+.button__icon {
   display: inline-flex;
   margin-left: calc(-1 * var(--s-space-4));
   color: var(--s-icon-default);
+  order: 0;
 }
 
 .button__label {
@@ -284,4 +292,5 @@
   max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
+  order: 1;
 }

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

@@ -2,6 +2,7 @@ import { Component, h, Host, Prop } from "@stencil/core";
 import classnames from "classnames";
 export class FlipButton {
   constructor() {
+    this.iconPosition = "start";
     this.intent = "default";
     this.size = "m";
     this.type = "button";
@@ -21,13 +22,18 @@ export class FlipButton {
     const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
       (this.variant === "floating" && this.intent === "default");
     const isLink = Boolean(this.href);
-    const className = classnames("button", `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+    const ariaLabel = Boolean(this.flipAriaLabel)
+      ? this.flipAriaLabel
+      : hideLabel
+        ? this.label
+        : undefined;
+    const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
       "button--icon-only": hideLabel,
     });
     const Tag = isLink ? "a" : "button";
     return (h(Host, null,
-      h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value },
-        this.icon && (h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })),
+      h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value },
+        this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })),
         !hideLabel && h("span", { class: "button__label" }, this.label))));
   }
   static get is() { return "flip-button"; }
@@ -90,6 +96,23 @@ export class FlipButton {
       "attribute": "flip-aria-describedby",
       "reflect": false
     },
+    "flipAriaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "flip-aria-label",
+      "reflect": false
+    },
     "form": {
       "type": "string",
       "mutable": false,
@@ -158,6 +181,28 @@ export class FlipButton {
       "attribute": "icon",
       "reflect": false
     },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "FlipButtonIconPosition",
+        "resolved": "\"end\" | \"start\"",
+        "references": {
+          "FlipButtonIconPosition": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    },
     "intent": {
       "type": "string",
       "mutable": false,
@@ -316,3 +361,4 @@ export class FlipButton {
     }
   }; }
 }
+//# sourceMappingURL=flip-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-button.js","sourceRoot":"","sources":["../../../../src/components/flip-button/flip-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipButtonIconPosition = \"start\" | \"end\";\n\nexport type FlipButtonIntent = \"default\" | \"primary\" | \"critical\";\n\nexport type FlipButtonSize = \"m\" | \"l\";\n\nexport type FlipButtonType = \"button\" | \"submit\";\n\nexport type FlipButtonVariant =\n  | \"flat\"\n  | \"ghost\"\n  | \"plain\"\n  | \"floating\"\n  | \"on-image\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  tag: \"flip-button\",\n  styleUrl: \"flip-button.css\",\n})\nexport class FlipButton {\n  @Prop() disabled?: boolean;\n  @Prop() download?: string;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() flipAriaLabel?: string;\n  @Prop() form?: string;\n  @Prop() hideLabel?: boolean;\n  @Prop() href?: string;\n  @Prop() icon?: string;\n  @Prop() iconPosition: FlipButtonIconPosition = \"start\";\n  @Prop() intent?: FlipButtonIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() name?: string;\n  @Prop() size?: FlipButtonSize = \"m\";\n  @Prop() target?: string;\n  @Prop() type?: FlipButtonType = \"button\";\n  @Prop() value?: string;\n  @Prop() variant?: FlipButtonVariant = \"ghost\";\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 hideLabel =\n      (this.hideLabel && Boolean(this.icon)) ||\n      (this.variant === \"floating\" && this.intent === \"default\");\n\n    const isLink = Boolean(this.href);\n\n    const ariaLabel = Boolean(this.flipAriaLabel)\n      ? this.flipAriaLabel\n      : hideLabel\n      ? this.label\n      : undefined;\n\n    const className = classnames(\n      \"button\",\n      `button--icon-position-${this.iconPosition}`,\n      `button--intent-${this.intent}`,\n      `button--size-${this.size}`,\n      `button--variant-${this.variant}`,\n      {\n        \"button--icon-only\": hideLabel,\n      }\n    );\n\n    const Tag = isLink ? \"a\" : \"button\";\n\n    return (\n      <Host>\n        <Tag\n          aria-describedby={this.flipAriaDescribedby}\n          aria-disabled={this.disabled && !isLink ? \"true\" : undefined}\n          aria-label={ariaLabel}\n          class={className}\n          disabled={isLink ? undefined : this.disabled}\n          download={isLink ? undefined : this.download}\n          form={isLink ? undefined : this.form}\n          href={this.href}\n          name={isLink ? undefined : this.name}\n          target={isLink ? this.target : undefined}\n          type={isLink ? undefined : this.type}\n          value={isLink ? undefined : this.value}\n        >\n          {this.icon && (\n            <span\n              class=\"button__icon\"\n              innerHTML={this.icon}\n              ref={(el) => (this.iconEl = el)}\n            ></span>\n          )}\n          {!hideLabel && <span class=\"button__label\">{this.label}</span>}\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -29,3 +29,4 @@ FlipButton.args = {
   icon: "<flip-icon-add></flip-icon-add>",
   label: "Label",
 };
+//# sourceMappingURL=flip-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flip-button.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-button/flip-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,aAAa;AACb,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,eAAe;EACb,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,MAAM,EAAE,0CAA0C;UAClD,OAAO,EAAE,aAAa;SACvB;OACF;KACF;GACF;EACD,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,uBAAuB;CAC/B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;EAE1D,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,UAAU,CAAC,IAAI,GAAG;EAChB,IAAI,EAAE,iCAAiC;EACvC,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\n// @ts-ignore\nimport Docs from \"./flip-button.mdx\";\n\nexport default {\n  argTypes: {\n    icon: {\n      table: {\n        type: {\n          detail: \"e.g. <flip-icon-close></flip-icon-close>\",\n          summary: \"flip-icon-*\",\n        },\n      },\n    },\n  },\n  component: \"flip-button\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipButton\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-button\", args);\n\n  return element;\n};\n\nexport const FlipButton = Template.bind({});\n\nFlipButton.args = {\n  icon: \"<flip-icon-add></flip-icon-add>\",\n  label: \"Label\",\n};\n"]}

package/dist/collection/components/flip-button-group/flip-button-group.js

@@ -79,3 +79,4 @@ export class FlipButtonGroup {
     }
   }; }
 }
+//# sourceMappingURL=flip-button-group.js.map

package/dist/collection/components/flip-button-group/flip-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-button-group.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,OAAO,eAAe;EAL5B;IAMU,gBAAW,GAA+B,YAAY,CAAC;GA6BhE;EAzBC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,kBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC7C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,KAAK,EAAC,cAAc,EACpB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC/C,CAAC,CAAC,SAAS;UACX,CAAC,CAAC,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,IAAI,CAAC,IAAI;QAEf,eAAa,CACF,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-button-group.css\",\n  tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n  @Prop() orientation: FlipButtonGroupOrientation = \"horizontal\";\n  @Prop() stretch: boolean;\n  @Prop() wrap: boolean;\n\n  render() {\n    return (\n      <Host>\n        <flip-stack\n          align={\n            this.orientation === \"vertical\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          class=\"button-group\"\n          justify={\n            this.orientation === \"horizontal\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          orientation={this.orientation}\n          role=\"group\"\n          spacing=\"8\"\n          wrap={this.wrap}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-button-group/flip-button-group.stories.js

@@ -19,3 +19,4 @@ const Template = (args) => {
 };
 export const FlipButtonGroup = Template.bind({});
 FlipButtonGroup.args = {};
+//# sourceMappingURL=flip-button-group.stories.js.map

package/dist/collection/components/flip-button-group/flip-button-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-button-group.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-button-group/flip-button-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,yBAAyB,CAAC;AAE3C,eAAe;EACb,SAAS,EAAE,mBAAmB;EAC9B,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,4BAA4B;CACpC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,OAAO,GAAG,oBAAoB,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;EAEhE,OAAO,CAAC,SAAS,GAAG;;;GAGnB,CAAC;EAEF,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,eAAe,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-button-group.mdx\";\n\nexport default {\n  component: \"flip-button-group\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipButtonGroup\",\n};\n\nconst Template = (args) => {\n  const element = generateStoryElement(\"flip-button-group\", args);\n\n  element.innerHTML = `\n    <flip-button label=\"Button\"></flip-button>\n    <flip-button intent=\"primary\" label=\"Button\" variant=\"flat\"></flip-button>\n  `;\n\n  return element;\n};\n\nexport const FlipButtonGroup = Template.bind({});\n\nFlipButtonGroup.args = {};\n"]}