@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/cjs/flip-action-list-item.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 
 const FlipActionListItem = class {
   constructor(hostRef) {

package/dist/cjs/flip-action-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-action-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,usDAAusD;;MCYxtD,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,GAAGA,kBAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACRA,kBAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACDA,kBAAM,KAAK,EAAC,mCAAmC,IAC7CA,kBAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACTA,kBACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-width: 15rem;\n  margin: 0;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-surface-overlay-default);\n    cursor: default;\n\n    & .action-list-item__label,\n    & .action-list-item__description {\n      color: var(--s-text-disabled);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n}\n\n.action-list-item--size-l {\n  padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n  &:not(:disabled) {\n    & .action-list-item__label {\n      color: var(--s-text-critical);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n}\n\n.action-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n  display: inline-flex;\n  min-width: 0;\n  flex-grow: 1;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.action-list-item__label {\n  overflow: hidden;\n  max-width: 100%;\n  padding-top: 0.0625rem;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n  color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n","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"],"version":3}
+{"file":"flip-action-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,oxDAAoxD;;MCYryD,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,GAAGA,kBAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACRA,kBAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACDA,kBAAM,KAAK,EAAC,mCAAmC,IAC7CA,kBAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACTA,kBACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.action-list-item {\n  display: inline-flex;\n  width: 100%;\n  min-width: 15rem;\n  margin: 0;\n  padding: var(--s-space-12) var(--s-space-16);\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n  cursor: pointer;\n  gap: var(--s-space-12);\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:focus {\n    background-color: var(--s-surface-overlay-hovered);\n    outline: none;\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-surface-overlay-default);\n    cursor: default;\n\n    & .action-list-item__label,\n    & .action-list-item__description {\n      color: var(--s-text-disabled);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n}\n\n.action-list-item--size-l {\n  padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n  & ::part(icon) {\n    color: var(--s-icon-critical);\n  }\n\n  &:not(:disabled) {\n    & .action-list-item__label {\n      color: var(--s-text-critical);\n    }\n\n    & .action-list-item__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n}\n\n.action-list-item__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n  display: inline-flex;\n  min-width: 0;\n  flex-grow: 1;\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.action-list-item__label {\n  overflow: hidden;\n  max-width: 100%;\n  padding-top: 0.0625rem;\n  font-weight: var(--s-font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n  color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n  display: inline-flex;\n  flex-shrink: 0;\n  color: var(--s-icon-highlight);\n}\n","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"],"version":3}

package/dist/cjs/flip-avatar-group.cjs.entry.js

@@ -12,12 +12,22 @@ const FlipAvatarGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const className = index$1.classnames("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge),
     });
     const badgeClassName = index$1.classnames("avatar-group__badge");
-    return (index.h(index.Host, null, index.h("div", { class: className, role: "group" }, index.h("slot", null), this.badge && (index.h("span", { class: badgeClassName, innerHTML: this.badge })))));
+    return (index.h(index.Host, null, index.h("div", { class: className, role: "group" }, index.h("slot", null), this.badge && (index.h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
   }
 };
 FlipAvatarGroup.style = flipAvatarGroupCss;

package/dist/cjs/flip-avatar-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-avatar-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAGA,kBAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjCA,qBAAa,EACZ,IAAI,CAAC,KAAK,KACTA,kBAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar-group {\n  position: relative;\n  display: inline-grid;\n  grid-template-rows: repeat(8, 1fr);\n  grid-template-columns: repeat(8, 1fr);\n\n  & ::slotted(*:first-of-type) {\n    z-index: 1;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 1;\n    grid-column-end: 7;\n    grid-row-start: 3;\n    grid-row-end: 9;\n  }\n\n  & ::slotted(*:nth-of-type(2)) {\n    z-index: 0;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 3;\n    grid-column-end: 9;\n    grid-row-start: 1;\n    grid-row-end: 7;\n  }\n}\n\n.avatar-group__badge {\n  position: absolute;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n","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"],"version":3}
+{"file":"flip-avatar-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;EAK1B,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,eAAe;IACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MACxB,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEvD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;GAClC;EAED,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAGA,kBAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjCA,qBAAa,EACZ,IAAI,CAAC,KAAK,KACTA,kBACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC1B,CACT,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar-group {\n  position: relative;\n  display: inline-grid;\n  grid-template-rows: repeat(8, 1fr);\n  grid-template-columns: repeat(8, 1fr);\n\n  & ::slotted(*:first-of-type) {\n    z-index: 1;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 1;\n    grid-column-end: 7;\n    grid-row-start: 3;\n    grid-row-end: 9;\n  }\n\n  & ::slotted(*:nth-of-type(2)) {\n    z-index: 0;\n    display: inline-flex;\n    border: 0.25rem solid var(--flip-avatar-group-border-color);\n    border-radius: 50%;\n    grid-column-start: 3;\n    grid-column-end: 9;\n    grid-row-start: 1;\n    grid-row-end: 7;\n  }\n}\n\n.avatar-group__badge {\n  position: absolute;\n  z-index: 2;\n  right: 0;\n  bottom: 0;\n  display: inline-flex;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n","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  private badgeEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceBadgeProps();\n  }\n\n  private forceBadgeProps() {\n    if (!Boolean(this.badge)) {\n      return;\n    }\n\n    const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n    badge?.setAttribute(\"size\", \"m\");\n  }\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\n              class={badgeClassName}\n              innerHTML={this.badge}\n              ref={(el) => (this.badgeEl = el)}\n            ></span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-avatar.cjs.entry.js

@@ -50,9 +50,19 @@ const FlipAvatar = class {
       }
     };
   }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
   watchSrcProp() {
     this.imageAvailable = undefined;
   }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const showImage = Boolean(this.src) &&
       (this.imageAvailable || this.imageAvailable === undefined);
@@ -67,7 +77,7 @@ const FlipAvatar = class {
       "avatar--interactive": this.interactive,
     });
     const badgeClassName = index$1.classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
-    return (index.h(index.Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { class: className, part: "avatar" }, showImage && (index.h("span", { class: "avatar__image" }, index.h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { class: "avatar__initials" }, index.h("span", null, this.initials))), showIcon && index.h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { class: "avatar__icon" }, index.h("flip-icon-person", null))), showBadge && (index.h("span", { class: badgeClassName, innerHTML: this.badge }))), this.showLabel && (index.h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+    return (index.h(index.Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, index.h("span", { class: className, part: "avatar" }, showImage && (index.h("span", { class: "avatar__image" }, index.h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))), showInitials && (index.h("span", { class: "avatar__initials" }, index.h("span", null, this.initials))), showIcon && index.h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (index.h("span", { class: "avatar__icon" }, index.h("flip-icon-person", null))), showBadge && (index.h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) }))), this.showLabel && (index.h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/flip-avatar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-avatar.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,u2GAAu2G;;ACO73G,MAAM,sBAAsB,GAAwC;EAClE,EAAE,EAAE,EAAE;EACN,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,EAAE,EAAE,EAAE;EACN,KAAK,EAAE,GAAG;CACX,CAAC;MAOW,UAAU;EALvB;;IASU,kBAAa,GAA6B,QAAQ,CAAC;IAGnD,gBAAW,GAAa,KAAK,CAAC;IAE9B,cAAS,GAAa,KAAK,CAAC;IAC5B,SAAI,GAAoB,GAAG,CAAC;IAE5B,YAAO,GAAuB,OAAO,CAAC;IAStC,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;IAEM,wBAAmB,GAAG;MAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;;;;;MAKvC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;OACtB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,KAAoB;MACrC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;OACtB;KACF,CAAC;GA2EH;EA3GC,YAAY;IACV,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;GACjC;EAgCD,MAAM;IACJ,MAAM,SAAS,GACb,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;OAChB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,MAAM,gBAAgB,GAAG,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAC;IAClE,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;IAE3D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEjD,MAAM,SAAS,GAAGA,kBAAU,CAC1B,QAAQ,EACR,gBAAgB,IAAI,CAAC,IAAI,EAAE,EAC3B,mBAAmB,IAAI,CAAC,OAAO,EAAE,EACjC;MACE,kBAAkB,EAAE,QAAQ,IAAI,gBAAgB;MAChD,sBAAsB,EAAE,YAAY;MACpC,qBAAqB,EAAE,IAAI,CAAC,WAAW;KACxC,CACF,CAAC;IAEF,MAAM,cAAc,GAAGA,kBAAU,CAC/B,eAAe,EACf,2BAA2B,IAAI,CAAC,aAAa,EAAE,CAChD,CAAC;IAEF,QACEC,QAACC,UAAI,kBACS,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,EACxD,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EACpD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,SAAS,IAE1CD,kBAAM,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ,IAClC,SAAS,KACRA,kBAAM,KAAK,EAAC,eAAe,IACzBA,iBACE,GAAG,EAAC,EAAE,EACN,MAAM,EAAE,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,GACxC,CACG,CACR,EACA,YAAY,KACXA,kBAAM,KAAK,EAAC,kBAAkB,IAC5BA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CACvB,CACR,EACA,QAAQ,IAAIA,kBAAM,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACpE,gBAAgB,KACfA,kBAAM,KAAK,EAAC,cAAc,IACxBA,iCAAqC,CAChC,CACR,EACA,SAAS,KACRA,kBAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACI,EAEN,IAAI,CAAC,SAAS,KACbA,uCAAkB,KAAK,EAAC,eAAe,IACpC,IAAI,CAAC,KAAK,CACN,CACR,CACI,EACP;GACH;;;;;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-direction: column;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.avatar--has-icon {\n  color: var(--s-icon-default);\n  background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n  padding-right: 0;\n  padding-left: 0;\n  color: #fff;\n}\n\n.avatar--interactive {\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.avatar--size-xs {\n  width: 1.75rem;\n  height: 1.75rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: 0.4375rem;\n    padding-left: 0.4375rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-s {\n  width: 2rem;\n  height: 2rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-8);\n    padding-left: var(--s-space-8);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-m {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: var(--s-font-size-base);\n\n  &.avatar--has-icon {\n    padding-right: 0.625rem;\n    padding-left: 0.625rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.625rem;\n  }\n}\n\n.avatar--size-l {\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--s-font-size-lg);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-12);\n    padding-left: var(--s-space-12);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.75rem;\n  }\n}\n\n.avatar--size-xl {\n  width: 4rem;\n  height: 4rem;\n  font-size: var(--s-font-size-xl);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-16);\n    padding-left: var(--s-space-16);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 1rem;\n  }\n}\n\n.avatar--size-2xl {\n  width: 9rem;\n  height: 9rem;\n  font-size: 3.375rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-32);\n    padding-left: var(--s-space-32);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 2.25rem;\n  }\n}\n\n.avatar__image {\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n\n  & > img {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__icon {\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n\n  & > * {\n    width: 100%;\n    height: 100%;\n  }\n\n  & > *::part(icon) {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__initials {\n  display: inline-flex;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding-right: 0.0625rem;\n  padding-left: 0.0625rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  background-color: var(--s-decorative-6-default);\n\n  & > span {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.avatar__badge {\n  position: absolute;\n  bottom: 0;\n  left: 55%;\n  display: inline-flex;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n  top: 0;\n  bottom: auto;\n  transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n  margin-top: var(--s-space-4);\n  color: var(--s-icon-default);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-align: center;\n}\n","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"],"version":3}
+{"file":"flip-avatar.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,u2GAAu2G;;ACO73G,MAAM,sBAAsB,GAAwC;EAClE,EAAE,EAAE,EAAE;EACN,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,CAAC,EAAE,EAAE;EACL,EAAE,EAAE,EAAE;EACN,KAAK,EAAE,GAAG;CACX,CAAC;MAOW,UAAU;EALvB;;IASU,kBAAa,GAA6B,QAAQ,CAAC;IAGnD,gBAAW,GAAa,KAAK,CAAC;IAE9B,cAAS,GAAa,KAAK,CAAC;IAC5B,SAAI,GAAoB,GAAG,CAAC;IAE5B,YAAO,GAAuB,OAAO,CAAC;IAyBtC,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;IAEM,wBAAmB,GAAG;MAC5B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;;;;;MAKvC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;OACtB;KACF,CAAC;IAEM,YAAO,GAAG,CAAC,KAAoB;MACrC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;OACtB;KACF,CAAC;GA+EH;EA9HC,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,YAAY;IACV,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;GACjC;EAEO,eAAe;IACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MACxB,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEvD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;GAClC;EAgCD,MAAM;IACJ,MAAM,SAAS,GACb,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;OAChB,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,MAAM,gBAAgB,GAAG,CAAC,SAAS,IAAI,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAC;IAClE,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;IAE3D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;IAEjD,MAAM,SAAS,GAAGA,kBAAU,CAC1B,QAAQ,EACR,gBAAgB,IAAI,CAAC,IAAI,EAAE,EAC3B,mBAAmB,IAAI,CAAC,OAAO,EAAE,EACjC;MACE,kBAAkB,EAAE,QAAQ,IAAI,gBAAgB;MAChD,sBAAsB,EAAE,YAAY;MACpC,qBAAqB,EAAE,IAAI,CAAC,WAAW;KACxC,CACF,CAAC;IAEF,MAAM,cAAc,GAAGA,kBAAU,CAC/B,eAAe,EACf,2BAA2B,IAAI,CAAC,aAAa,EAAE,CAChD,CAAC;IAEF,QACEC,QAACC,UAAI,kBACS,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,EACxD,OAAO,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EACpD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,SAAS,IAE1CD,kBAAM,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ,IAClC,SAAS,KACRA,kBAAM,KAAK,EAAC,eAAe,IACzBA,iBACE,GAAG,EAAC,EAAE,EACN,MAAM,EAAE,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,MAAM,EAAE,IAAI,CAAC,iBAAiB,EAC9B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,GACxC,CACG,CACR,EACA,YAAY,KACXA,kBAAM,KAAK,EAAC,kBAAkB,IAC5BA,sBAAO,IAAI,CAAC,QAAQ,CAAQ,CACvB,CACR,EACA,QAAQ,IAAIA,kBAAM,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACpE,gBAAgB,KACfA,kBAAM,KAAK,EAAC,cAAc,IACxBA,iCAAqC,CAChC,CACR,EACA,SAAS,KACRA,kBACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC1B,CACT,CACI,EAEN,IAAI,CAAC,SAAS,KACbA,uCAAkB,KAAK,EAAC,eAAe,IACpC,IAAI,CAAC,KAAK,CACN,CACR,CACI,EACP;GACH;;;;;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-direction: column;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.avatar {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n}\n\n.avatar--has-icon {\n  color: var(--s-icon-default);\n  background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n  padding-right: 0;\n  padding-left: 0;\n  color: #fff;\n}\n\n.avatar--interactive {\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.avatar--size-xs {\n  width: 1.75rem;\n  height: 1.75rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: 0.4375rem;\n    padding-left: 0.4375rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-s {\n  width: 2rem;\n  height: 2rem;\n  font-size: 0.75rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-8);\n    padding-left: var(--s-space-8);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.5rem;\n  }\n}\n\n.avatar--size-m {\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: var(--s-font-size-base);\n\n  &.avatar--has-icon {\n    padding-right: 0.625rem;\n    padding-left: 0.625rem;\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.625rem;\n  }\n}\n\n.avatar--size-l {\n  width: 3rem;\n  height: 3rem;\n  font-size: var(--s-font-size-lg);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-12);\n    padding-left: var(--s-space-12);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 0.75rem;\n  }\n}\n\n.avatar--size-xl {\n  width: 4rem;\n  height: 4rem;\n  font-size: var(--s-font-size-xl);\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-16);\n    padding-left: var(--s-space-16);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 1rem;\n  }\n}\n\n.avatar--size-2xl {\n  width: 9rem;\n  height: 9rem;\n  font-size: 3.375rem;\n\n  &.avatar--has-icon {\n    padding-right: var(--s-space-32);\n    padding-left: var(--s-space-32);\n  }\n\n  &.avatar--variant-square,\n  &.avatar--variant-square .avatar__image,\n  &.avatar--variant-square .avatar__initials {\n    border-radius: 2.25rem;\n  }\n}\n\n.avatar__image {\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n\n  & > img {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__icon {\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n\n  & > * {\n    width: 100%;\n    height: 100%;\n  }\n\n  & > *::part(icon) {\n    width: 100%;\n    height: 100%;\n  }\n}\n\n.avatar__initials {\n  display: inline-flex;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding-right: 0.0625rem;\n  padding-left: 0.0625rem;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  background-color: var(--s-decorative-6-default);\n\n  & > span {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n.avatar__badge {\n  position: absolute;\n  bottom: 0;\n  left: 55%;\n  display: inline-flex;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n  top: 0;\n  bottom: auto;\n  transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n  margin-top: var(--s-space-4);\n  color: var(--s-icon-default);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  text-align: center;\n}\n","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  private badgeEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceBadgeProps();\n  }\n\n  @Watch(\"src\")\n  watchSrcProp() {\n    this.imageAvailable = undefined;\n  }\n\n  private forceBadgeProps() {\n    if (!Boolean(this.badge)) {\n      return;\n    }\n\n    const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n    badge?.setAttribute(\"size\", \"m\");\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\n              class={badgeClassName}\n              innerHTML={this.badge}\n              ref={(el) => (this.badgeEl = el)}\n            ></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"],"version":3}

package/dist/cjs/flip-button-group.cjs.entry.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
-const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
+const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:\"\";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--flip-button-border-top-right-radius:0;--flip-button-border-top-left-radius:0;--flip-button-border-bottom-right-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--flip-button-border-top-right-radius:0;--flip-button-border-bottom-right-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-top-left-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--flip-button-border-top-left-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-left-radius:0}";
 
 const FlipButtonGroup = class {
   constructor(hostRef) {
@@ -12,11 +14,15 @@ const FlipButtonGroup = class {
     this.orientation = "horizontal";
   }
   render() {
+    const spacing = this.segmented ? "0" : "8";
+    const className = index$1.classnames("button-group", {
+      "button-group--segmented": this.segmented,
+    });
     return (index.h(index.Host, null, index.h("flip-stack", { align: this.orientation === "vertical" && this.stretch
         ? "stretch"
-        : "start", class: "button-group", justify: this.orientation === "horizontal" && this.stretch
+        : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
         ? "stretch"
-        : "start", orientation: this.orientation, role: "group", spacing: "8", wrap: this.wrap }, index.h("slot", null))));
+        : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, index.h("slot", null))));
   }
 };
 FlipButtonGroup.style = flipButtonGroupCss;

package/dist/cjs/flip-button-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-button-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,oDAAoD;;MCUlE,eAAe;EAL5B;;IAMU,gBAAW,GAA+B,YAAY,CAAC;GA6BhE;EAzBC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,wBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC3C,SAAS;UACT,OAAO,EAEb,KAAK,EAAC,cAAc,EACpB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC7C,SAAS;UACT,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfA,qBAAa,CACF,CACR,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-button-group/flip-button-group.css?tag=flip-button-group&encapsulation=shadow","./src/components/flip-button-group/flip-button-group.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n","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"],"version":3}
+{"file":"flip-button-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,40DAA40D;;MCW11D,eAAe;EAL5B;;IAMU,gBAAW,GAAgC,YAAY,CAAC;GAoCjE;EA/BC,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC;IAE3C,MAAM,SAAS,GAAGA,kBAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,IAAI,CAAC,SAAS;KAC1C,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,wBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC3C,SAAS;UACT,OAAO,EAEb,KAAK,EAAE,SAAS,EAChB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC7C,SAAS;UACT,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfA,qBAAa,CACF,CACR,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-button-group/flip-button-group.css?tag=flip-button-group&encapsulation=shadow","./src/components/flip-button-group/flip-button-group.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.button-group--segmented {\n  & ::slotted(*:not(:last-child)) {\n    position: relative;\n\n    &:after {\n      position: absolute;\n      z-index: 1;\n      top: 50%;\n      left: 100%;\n      width: var(--s-border-width-default);\n      height: calc(100% - var(--s-space-16));\n      background-color: var(--s-border-strong);\n      content: \"\";\n      transform: translate3d(-50%, -50%, 0);\n      pointer-events: none;\n    }\n  }\n\n  & ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]) {\n    &:after {\n      background-color: var(--s-text-on-action-primary);\n    }\n  }\n\n  & ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]) {\n    &:after {\n      background-color: var(--s-text-on-action-primary);\n    }\n  }\n\n  & ::slotted(*:not(:first-child):not(:last-child)) {\n    --flip-button-border-top-right-radius: 0;\n    --flip-button-border-top-left-radius: 0;\n    --flip-button-border-bottom-right-radius: 0;\n    --flip-button-border-bottom-left-radius: 0;\n\n    --flip-icon-button-border-top-right-radius: 0;\n    --flip-icon-button-border-top-left-radius: 0;\n    --flip-icon-button-border-bottom-right-radius: 0;\n    --flip-icon-button-border-bottom-left-radius: 0;\n  }\n\n  & ::slotted(*:first-child) {\n    --flip-button-border-top-right-radius: 0;\n    --flip-button-border-bottom-right-radius: 0;\n\n    --flip-icon-button-border-top-right-radius: 0;\n    --flip-icon-button-border-bottom-right-radius: 0;\n    --flip-icon-button-border-top-left-radius: var(--s-border-radius-base);\n    --flip-icon-button-border-bottom-left-radius: var(--s-border-radius-base);\n  }\n\n  & ::slotted(*:last-child) {\n    --flip-button-border-top-left-radius: 0;\n    --flip-button-border-bottom-left-radius: 0;\n\n    --flip-icon-button-border-top-right-radius: var(--s-border-radius-base);\n    --flip-icon-button-border-bottom-right-radius: var(--s-border-radius-base);\n    --flip-icon-button-border-top-left-radius: 0;\n    --flip-icon-button-border-bottom-left-radius: 0;\n  }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\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() segmented?: boolean;\n  @Prop() stretch?: boolean;\n  @Prop() wrap?: boolean;\n\n  render() {\n    const spacing = this.segmented ? \"0\" : \"8\";\n\n    const className = classnames(\"button-group\", {\n      \"button-group--segmented\": this.segmented,\n    });\n\n    return (\n      <Host>\n        <flip-stack\n          align={\n            this.orientation === \"vertical\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          class={className}\n          justify={\n            this.orientation === \"horizontal\" && this.stretch\n              ? \"stretch\"\n              : \"start\"\n          }\n          orientation={this.orientation}\n          role=\"group\"\n          spacing={spacing}\n          wrap={this.wrap}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-button.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipButtonCss = ".sc-flip-button-h{display:inline-block;max-width:100%}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus{outline-color:var(--s-focus-default)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-4)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-flip-button .button__icon.sc-flip-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-radius:50%}.button--icon-only.sc-flip-button .button__icon.sc-flip-button{margin-right:0;margin-left:0}.button__icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
+const flipButtonCss = ".sc-flip-button-h{display:inline-block;max-width:100%}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-right-radius:var(--flip-button-border-top-right-radius);border-top-left-radius:var(--flip-button-border-top-left-radius);border-bottom-right-radius:var(--flip-button-border-bottom-right-radius);border-bottom-left-radius:var(--flip-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus{outline-color:var(--s-focus-default)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-4)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-flip-button .button__icon.sc-flip-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-top-right-radius:var(--flip-icon-button-border-top-right-radius);border-top-left-radius:var(--flip-icon-button-border-top-left-radius);border-bottom-right-radius:var(\n    --flip-icon-button-border-bottom-right-radius\n  );border-bottom-left-radius:var(--flip-icon-button-border-bottom-left-radius)}.button--icon-only.sc-flip-button .button__icon.sc-flip-button{margin-right:0;margin-left:0}.button__icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
 
 const FlipButton = class {
   constructor(hostRef) {

package/dist/cjs/flip-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-button.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,onPAAonP;;MC8B7nP,UAAU;EAZvB;;IAqBU,iBAAY,GAA2B,OAAO,CAAC;IAC/C,WAAM,GAAsB,SAAS,CAAC;IAGtC,SAAI,GAAoB,GAAG,CAAC;IAE5B,SAAI,GAAoB,QAAQ,CAAC;IAEjC,YAAO,GAAuB,OAAO,CAAC;GAwE/C;EApEC,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;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;GAClC;EAED,MAAM;IACJ,MAAM,SAAS,GACb,CAAC,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OACpC,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,aAAa;QAClB,SAAS;UACT,IAAI,CAAC,KAAK;UACV,SAAS,CAAC;IAEd,MAAM,SAAS,GAAGA,kBAAU,CAC1B,QAAQ,EACR,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAC5C,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAC/B,gBAAgB,IAAI,CAAC,IAAI,EAAE,EAC3B,mBAAmB,IAAI,CAAC,OAAO,EAAE,EACjC;MACE,mBAAmB,EAAE,SAAS;KAC/B,CACF,CAAC;IAEF,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;IAEpC,QACEC,QAACC,UAAI,QACHD,QAAC,GAAG,wBACgB,IAAI,CAAC,mBAAmB,mBAC3B,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,gBAChD,SAAS,EACrB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5C,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5C,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EACxC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,IAErC,IAAI,CAAC,IAAI,KACRA,kBACE,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT,EACA,CAAC,SAAS,IAAIA,kBAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-button/flip-button.css?tag=flip-button&encapsulation=scoped","./src/components/flip-button/flip-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  max-width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.button {\n  display: inline-flex;\n  width: 100%;\n  padding: var(--s-space-8) var(--s-space-16);\n  justify-content: center;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-base);\n  color: var(--s-text-subdued);\n  background-color: var(--flip-ghost-button-background-default);\n  font: inherit;\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-lg);\n  text-decoration: none;\n  cursor: pointer;\n  gap: var(--s-space-8);\n\n  &:hover {\n    background-color: var(--flip-ghost-button-background-hovered);\n  }\n\n  &:active {\n    background-color: var(--flip-ghost-button-background-pressed);\n  }\n\n  &:disabled {\n    color: var(--s-text-disabled);\n    background-color: var(--flip-ghost-button-background-default);\n    cursor: default;\n\n    & .button__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.button--variant-ghost {\n  &.button--intent-primary:not(:disabled) {\n    color: var(--s-text-highlight);\n\n    & .button__icon {\n      color: var(--s-icon-highlight);\n    }\n  }\n\n  &.button--intent-critical:not(:disabled) {\n    color: var(--s-text-critical);\n\n    & .button__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n\n  &.button--size-l {\n    padding: var(--s-space-12) var(--s-space-20);\n\n    &.button--icon-only {\n      padding: var(--s-space-12);\n    }\n  }\n}\n\n.button--variant-flat {\n  color: var(--s-text-default);\n  background-color: var(--s-action-neutral-default);\n\n  &:hover {\n    background-color: var(--s-action-neutral-hovered);\n  }\n\n  &:active {\n    background-color: var(--s-action-neutral-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-action-neutral-disabled);\n  }\n\n  &.button--intent-primary:not(:disabled) {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-action-primary-default);\n\n    &:hover {\n      background-color: var(--s-action-primary-hovered);\n    }\n\n    &:active {\n      background-color: var(--s-action-primary-pressed);\n    }\n\n    & .button__icon {\n      color: var(--s-icon-on-action-primary);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-strong);\n  }\n}\n\n.button--variant-plain {\n  padding: 0;\n  border-radius: 0;\n  color: var(--s-interactive-neutral-default);\n  background-color: transparent;\n\n  &:hover:not(:disabled) {\n    color: var(--s-interactive-neutral-default);\n    background-color: transparent;\n    text-decoration: underline;\n    text-underline-offset: var(--s-space-4);\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-default);\n    }\n  }\n\n  &:active:not(:disabled) {\n    color: var(--s-interactive-neutral-hovered);\n    background-color: transparent;\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-hovered);\n    }\n  }\n\n  &:disabled {\n    color: var(--s-interactive-neutral-disabled);\n    background-color: transparent;\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-disabled);\n    }\n  }\n\n  &.button--intent-primary {\n    color: var(--s-interactive-primary-default);\n\n    &:hover {\n      color: var(--s-interactive-primary-default);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-default);\n      }\n    }\n\n    &:active {\n      color: var(--s-interactive-primary-hovered);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-hovered);\n      }\n    }\n\n    &:disabled {\n      color: var(--s-interactive-primary-disabled);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-disabled);\n      }\n    }\n\n    & .button__icon {\n      color: var(--s-interactive-primary-default);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-interactive-neutral-default);\n  }\n}\n\n.button--variant-on-image {\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3);\n\n  &:hover {\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4);\n  }\n\n  &:active {\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5);\n  }\n\n  &:disabled {\n    color: var(--s-text-on-image);\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3);\n\n    & .button__icon {\n      color: var(--s-icon-on-image);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-on-image);\n  }\n}\n\n.button--variant-floating {\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n\n  &:hover {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:active {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &.button--icon-only {\n    padding: var(--s-space-4);\n  }\n\n  &.button--intent-primary {\n    padding: var(--s-space-12) var(--s-space-20);\n    border-radius: 1.5rem;\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-action-primary-default);\n\n    &:hover:not(:disabled) {\n      color: var(--s-text-on-action-primary);\n      background-color: var(--s-action-primary-hovered);\n    }\n\n    &:active:not(:disabled) {\n      color: var(--s-text-on-action-primary);\n      background-color: var(--s-action-primary-pressed);\n    }\n\n    &:disabled {\n      color: var(--s-text-on-action-primary);\n\n      & .button__icon {\n        color: var(--s-icon-on-action-primary);\n      }\n    }\n\n    & .button__icon {\n      color: var(--s-icon-on-action-primary);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-strong);\n  }\n}\n\n.button--icon-position-end {\n  & .button__icon {\n    margin-right: calc(-1 * var(--s-space-4));\n    margin-left: 0;\n    order: 2;\n  }\n}\n\n.button--icon-only {\n  padding: var(--s-space-8);\n  border-radius: 50%;\n\n  & .button__icon {\n    margin-right: 0;\n    margin-left: 0;\n  }\n}\n\n.button__icon {\n  display: inline-flex;\n  margin-left: calc(-1 * var(--s-space-4));\n  color: var(--s-icon-default);\n  order: 0;\n}\n\n.button__label {\n  overflow: hidden;\n  max-width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  order: 1;\n}\n","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"],"version":3}
+{"file":"flip-button.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,8nQAA8nQ;;MC8BvoQ,UAAU;EAZvB;;IAqBU,iBAAY,GAA2B,OAAO,CAAC;IAC/C,WAAM,GAAsB,SAAS,CAAC;IAGtC,SAAI,GAAoB,GAAG,CAAC;IAE5B,SAAI,GAAoB,QAAQ,CAAC;IAEjC,YAAO,GAAuB,OAAO,CAAC;GAwE/C;EApEC,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;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;GAClC;EAED,MAAM;IACJ,MAAM,SAAS,GACb,CAAC,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OACpC,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,aAAa;QAClB,SAAS;UACT,IAAI,CAAC,KAAK;UACV,SAAS,CAAC;IAEd,MAAM,SAAS,GAAGA,kBAAU,CAC1B,QAAQ,EACR,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAC5C,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAC/B,gBAAgB,IAAI,CAAC,IAAI,EAAE,EAC3B,mBAAmB,IAAI,CAAC,OAAO,EAAE,EACjC;MACE,mBAAmB,EAAE,SAAS;KAC/B,CACF,CAAC;IAEF,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;IAEpC,QACEC,QAACC,UAAI,QACHD,QAAC,GAAG,wBACgB,IAAI,CAAC,mBAAmB,mBAC3B,IAAI,CAAC,QAAQ,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,gBAChD,SAAS,EACrB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5C,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5C,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EACxC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EACpC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,IAErC,IAAI,CAAC,IAAI,KACRA,kBACE,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT,EACA,CAAC,SAAS,IAAIA,kBAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-button/flip-button.css?tag=flip-button&encapsulation=scoped","./src/components/flip-button/flip-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  max-width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.button {\n  display: inline-flex;\n  width: 100%;\n  padding: var(--s-space-8) var(--s-space-16);\n  justify-content: center;\n  align-items: center;\n  border: none;\n  border-top-right-radius: var(--flip-button-border-top-right-radius);\n  border-top-left-radius: var(--flip-button-border-top-left-radius);\n  border-bottom-right-radius: var(--flip-button-border-bottom-right-radius);\n  border-bottom-left-radius: var(--flip-button-border-bottom-left-radius);\n  color: var(--s-text-subdued);\n  background-color: var(--flip-ghost-button-background-default);\n  font: inherit;\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-lg);\n  text-decoration: none;\n  cursor: pointer;\n  gap: var(--s-space-8);\n\n  &:hover {\n    background-color: var(--flip-ghost-button-background-hovered);\n  }\n\n  &:active {\n    background-color: var(--flip-ghost-button-background-pressed);\n  }\n\n  &:disabled {\n    color: var(--s-text-disabled);\n    background-color: var(--flip-ghost-button-background-default);\n    cursor: default;\n\n    & .button__icon {\n      color: var(--s-icon-disabled);\n    }\n  }\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.button--variant-ghost {\n  &.button--intent-primary:not(:disabled) {\n    color: var(--s-text-highlight);\n\n    & .button__icon {\n      color: var(--s-icon-highlight);\n    }\n  }\n\n  &.button--intent-critical:not(:disabled) {\n    color: var(--s-text-critical);\n\n    & .button__icon {\n      color: var(--s-icon-critical);\n    }\n  }\n\n  &.button--size-l {\n    padding: var(--s-space-12) var(--s-space-20);\n\n    &.button--icon-only {\n      padding: var(--s-space-12);\n    }\n  }\n}\n\n.button--variant-flat {\n  color: var(--s-text-default);\n  background-color: var(--s-action-neutral-default);\n\n  &:hover {\n    background-color: var(--s-action-neutral-hovered);\n  }\n\n  &:active {\n    background-color: var(--s-action-neutral-pressed);\n  }\n\n  &:disabled {\n    background-color: var(--s-action-neutral-disabled);\n  }\n\n  &.button--intent-primary:not(:disabled) {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-action-primary-default);\n\n    &:hover {\n      background-color: var(--s-action-primary-hovered);\n    }\n\n    &:active {\n      background-color: var(--s-action-primary-pressed);\n    }\n\n    & .button__icon {\n      color: var(--s-icon-on-action-primary);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-strong);\n  }\n}\n\n.button--variant-plain {\n  padding: 0;\n  border-radius: 0;\n  color: var(--s-interactive-neutral-default);\n  background-color: transparent;\n\n  &:hover:not(:disabled) {\n    color: var(--s-interactive-neutral-default);\n    background-color: transparent;\n    text-decoration: underline;\n    text-underline-offset: var(--s-space-4);\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-default);\n    }\n  }\n\n  &:active:not(:disabled) {\n    color: var(--s-interactive-neutral-hovered);\n    background-color: transparent;\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-hovered);\n    }\n  }\n\n  &:disabled {\n    color: var(--s-interactive-neutral-disabled);\n    background-color: transparent;\n\n    & .button__icon {\n      color: var(--s-interactive-neutral-disabled);\n    }\n  }\n\n  &.button--intent-primary {\n    color: var(--s-interactive-primary-default);\n\n    &:hover {\n      color: var(--s-interactive-primary-default);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-default);\n      }\n    }\n\n    &:active {\n      color: var(--s-interactive-primary-hovered);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-hovered);\n      }\n    }\n\n    &:disabled {\n      color: var(--s-interactive-primary-disabled);\n\n      & .button__icon {\n        color: var(--s-interactive-primary-disabled);\n      }\n    }\n\n    & .button__icon {\n      color: var(--s-interactive-primary-default);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-interactive-neutral-default);\n  }\n}\n\n.button--variant-on-image {\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3);\n\n  &:hover {\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4);\n  }\n\n  &:active {\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5);\n  }\n\n  &:disabled {\n    color: var(--s-text-on-image);\n    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3);\n\n    & .button__icon {\n      color: var(--s-icon-on-image);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-on-image);\n  }\n}\n\n.button--variant-floating {\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  box-shadow: 0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14);\n\n  &:hover {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-surface-overlay-hovered);\n  }\n\n  &:active {\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-surface-overlay-pressed);\n  }\n\n  &.button--icon-only {\n    padding: var(--s-space-4);\n  }\n\n  &.button--intent-primary {\n    padding: var(--s-space-12) var(--s-space-20);\n    border-radius: 1.5rem;\n    color: var(--s-text-on-action-primary);\n    background-color: var(--s-action-primary-default);\n\n    &:hover:not(:disabled) {\n      color: var(--s-text-on-action-primary);\n      background-color: var(--s-action-primary-hovered);\n    }\n\n    &:active:not(:disabled) {\n      color: var(--s-text-on-action-primary);\n      background-color: var(--s-action-primary-pressed);\n    }\n\n    &:disabled {\n      color: var(--s-text-on-action-primary);\n\n      & .button__icon {\n        color: var(--s-icon-on-action-primary);\n      }\n    }\n\n    & .button__icon {\n      color: var(--s-icon-on-action-primary);\n    }\n  }\n\n  & .button__icon {\n    color: var(--s-icon-strong);\n  }\n}\n\n.button--icon-position-end {\n  & .button__icon {\n    margin-right: calc(-1 * var(--s-space-4));\n    margin-left: 0;\n    order: 2;\n  }\n}\n\n.button--icon-only {\n  padding: var(--s-space-8);\n  border-top-right-radius: var(--flip-icon-button-border-top-right-radius);\n  border-top-left-radius: var(--flip-icon-button-border-top-left-radius);\n  border-bottom-right-radius: var(\n    --flip-icon-button-border-bottom-right-radius\n  );\n  border-bottom-left-radius: var(--flip-icon-button-border-bottom-left-radius);\n\n  & .button__icon {\n    margin-right: 0;\n    margin-left: 0;\n  }\n}\n\n.button__icon {\n  display: inline-flex;\n  margin-left: calc(-1 * var(--s-space-4));\n  color: var(--s-icon-default);\n  order: 0;\n}\n\n.button__label {\n  overflow: hidden;\n  max-width: 100%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  order: 1;\n}\n","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"],"version":3}

package/dist/cjs/flip-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-72831c5f.js');
 const index$1 = require('./index-b8470262.js');
 require('./_commonjsHelpers-a5111d61.js');
 
-const flipCheckboxCss = ".sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip-checkbox{box-sizing:border-box}.checkbox.sc-flip-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-flip-checkbox:focus-within .checkbox__box.sc-flip-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-flip-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:transparent}.checkbox--disabled.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__label.sc-flip-checkbox,.checkbox--disabled.sc-flip-checkbox .checkbox__description.sc-flip-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-flip-checkbox{position:relative;top:0.125rem;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:var(--s-action-neutral-hovered)}.checkbox__box.sc-flip-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-flip-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-flip-checkbox>*.sc-flip-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-flip-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-flip-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-flip-checkbox{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-4);align-items:flex-start;flex-direction:column}.checkbox__label.sc-flip-checkbox{font-weight:var(--s-font-weight-medium)}.checkbox__description.sc-flip-checkbox{color:var(--s-text-subdued)}";
+const flipCheckboxCss = ".sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip-checkbox{box-sizing:border-box}.checkbox.sc-flip-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-flip-checkbox:focus-within .checkbox__box.sc-flip-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-flip-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:transparent}.checkbox--disabled.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__label.sc-flip-checkbox,.checkbox--disabled.sc-flip-checkbox .checkbox__description.sc-flip-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-flip-checkbox{position:relative;top:0.125rem;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:var(--s-action-neutral-hovered)}.checkbox__box.sc-flip-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-flip-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-flip-checkbox>*.sc-flip-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-flip-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-flip-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-flip-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-4);align-items:flex-start;flex-direction:column}.checkbox__label.sc-flip-checkbox{font-weight:var(--s-font-weight-medium)}.checkbox__description.sc-flip-checkbox{color:var(--s-text-subdued)}";
 
 const FlipCheckbox = class {
   constructor(hostRef) {

package/dist/cjs/flip-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"flip-checkbox.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,0gHAA0gH;;MCiBrhH,YAAY;EAZzB;;;IAa2B,YAAO,GAAuB,KAAK,CAAC;IAErD,aAAQ,GAAa,KAAK,CAAC;IAU3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO;QACV,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;MAElE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACrC,CAAC;GAkEH;EAhEC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IACjE,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IAEvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE5E,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,KAAK,IAAI;QACjB,MAAM;QACN,IAAI,CAAC,OAAO,KAAK,KAAK;UACtB,OAAO;UACP,SAAS,CAAC;IAEhB,MAAM,SAAS,GAAGA,kBAAU,CAAC,UAAU,EAAE;MACvC,mBAAmB,EAAE,OAAO;MAC5B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;MACnC,yBAAyB,EAAE,aAAa;MACxC,mBAAmB,EAAE,IAAI,CAAC,OAAO;MACjC,qBAAqB,EAAE,SAAS;KACjC,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,mBAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5CA,kBAAM,KAAK,EAAC,mBAAmB,IAC7BA,sCACEA,mCACgB,gBAAgB,sBACZ,IAAI,CAAC,mBAAmB,kBAC5B,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvBA,iCAAkB,MAAM,EAAC,KAAK,EAAC,eAAe,IAC5CA,kBAAM,KAAK,EAAC,gBAAgB,IACzB,OAAO,IAAIA,uCAAiD,EAC5D,aAAa,KACZA,kBAAM,KAAK,EAAC,8BAA8B,GAAQ,CACnD,CACI,CACF,CACF,EACN,kBAAkB,KACjBA,kBAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/D,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9D,CACI,CACR,CACK,CACH,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-checkbox/flip-checkbox.css?tag=flip-checkbox&encapsulation=scoped","./src/components/flip-checkbox/flip-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.checkbox {\n  display: inline-flex;\n  line-height: var(--s-line-height-base);\n  cursor: pointer;\n\n  &:focus-within .checkbox__box {\n    box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default);\n  }\n}\n\n.checkbox--checked,\n.checkbox--indeterminate {\n  & .checkbox__control {\n    &:hover {\n      & .checkbox__box {\n        border-color: var(--s-interactive-primary-hovered);\n        background-color: var(--s-interactive-primary-hovered);\n      }\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-highlight);\n    color: var(--s-text-on-status);\n    background-color: var(--s-icon-highlight);\n  }\n}\n\n.checkbox--invalid {\n  &.checkbox--checked,\n  &.checkbox--indeterminate {\n    & .checkbox__box {\n      background-color: var(--s-icon-critical);\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-critical);\n  }\n}\n\n.checkbox--disabled {\n  cursor: default;\n\n  &.checkbox--checked,\n  &.checkbox--indeterminate {\n    & .checkbox__control {\n      &:hover {\n        & .checkbox__box {\n          border-color: var(--s-icon-disabled);\n          background-color: var(--s-icon-disabled);\n        }\n      }\n    }\n\n    & .checkbox__box {\n      background-color: var(--s-icon-disabled);\n    }\n  }\n\n  & .checkbox__control {\n    &:hover {\n      & .checkbox__box {\n        background-color: transparent;\n      }\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-disabled);\n  }\n\n  & .checkbox__label,\n  & .checkbox__description {\n    color: var(--s-text-disabled);\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  top: 0.125rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: var(--s-space-2);\n  flex-shrink: 0;\n\n  &:hover {\n    & .checkbox__box {\n      background-color: var(--s-action-neutral-hovered);\n    }\n  }\n}\n\n.checkbox__box {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  border: 0.125rem solid var(--s-icon-default);\n  border-radius: var(--s-border-radius-s);\n}\n\n.checkbox__icon {\n  display: inline-flex;\n  width: 1.0625rem;\n  height: 1.0625rem;\n\n  & > *::part(icon) {\n    width: 1.0625rem;\n    height: 1.0625rem;\n  }\n}\n\n.checkbox__indeterminate-icon {\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  &:after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 0.625rem;\n    height: 0.125rem;\n    border-radius: 0.0625rem;\n    background-color: currentColor;\n    content: \"\";\n    transform: translate3d(-50%, -50%, 0);\n  }\n}\n\n.checkbox__label-container {\n  display: inline-flex;\n  margin-left: var(--s-space-12);\n  padding-top: var(--s-space-4);\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.checkbox__label {\n  font-weight: var(--s-font-weight-medium);\n}\n\n.checkbox__description {\n  color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipCheckboxState = boolean | \"true\" | \"false\" | \"indeterminate\";\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  styleUrl: \"flip-checkbox.css\",\n  tag: \"flip-checkbox\",\n})\nexport class FlipCheckbox {\n  @Prop({ mutable: true }) checked?: FlipCheckboxState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  private onChange = () => {\n    this.checked =\n      this.checked === true || this.checked === \"true\" ? false : true;\n\n    this.valueChange.emit(this.checked);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n    const indeterminate = this.checked === \"indeterminate\";\n\n    const showLabelContainer = Boolean(this.label) || Boolean(this.description);\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const className = classnames(\"checkbox\", {\n      \"checkbox--checked\": checked,\n      \"checkbox--disabled\": this.disabled,\n      \"checkbox--indeterminate\": indeterminate,\n      \"checkbox--invalid\": this.invalid,\n      \"checkbox--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"checkbox__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-describedby={this.flipAriaDescribedby}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"checkbox__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                indeterminate={indeterminate}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"checkbox\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"checkbox__box\">\n              <span class=\"checkbox__icon\">\n                {checked && <flip-icon-check-strong></flip-icon-check-strong>}\n                {indeterminate && (\n                  <span class=\"checkbox__indeterminate-icon\"></span>\n                )}\n              </span>\n            </span>\n          </span>\n          {showLabelContainer && (\n            <span class=\"checkbox__label-container\">\n              {this.label && <span class=\"checkbox__label\">{this.label}</span>}\n              {this.description && (\n                <span class=\"checkbox__description\">{this.description}</span>\n              )}\n            </span>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"flip-checkbox.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,ygHAAygH;;MCiBphH,YAAY;EAZzB;;;IAa2B,YAAO,GAAuB,KAAK,CAAC;IAErD,aAAQ,GAAa,KAAK,CAAC;IAU3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO;QACV,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;MAElE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACrC,CAAC;GAkEH;EAhEC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IACjE,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IAEvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE5E,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,KAAK,IAAI;QACjB,MAAM;QACN,IAAI,CAAC,OAAO,KAAK,KAAK;UACtB,OAAO;UACP,SAAS,CAAC;IAEhB,MAAM,SAAS,GAAGA,kBAAU,CAAC,UAAU,EAAE;MACvC,mBAAmB,EAAE,OAAO;MAC5B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;MACnC,yBAAyB,EAAE,aAAa;MACxC,mBAAmB,EAAE,IAAI,CAAC,OAAO;MACjC,qBAAqB,EAAE,SAAS;KACjC,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,mBAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5CA,kBAAM,KAAK,EAAC,mBAAmB,IAC7BA,sCACEA,mCACgB,gBAAgB,sBACZ,IAAI,CAAC,mBAAmB,kBAC5B,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvBA,iCAAkB,MAAM,EAAC,KAAK,EAAC,eAAe,IAC5CA,kBAAM,KAAK,EAAC,gBAAgB,IACzB,OAAO,IAAIA,uCAAiD,EAC5D,aAAa,KACZA,kBAAM,KAAK,EAAC,8BAA8B,GAAQ,CACnD,CACI,CACF,CACF,EACN,kBAAkB,KACjBA,kBAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/D,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9D,CACI,CACR,CACK,CACH,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-checkbox/flip-checkbox.css?tag=flip-checkbox&encapsulation=scoped","./src/components/flip-checkbox/flip-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.checkbox {\n  display: inline-flex;\n  line-height: var(--s-line-height-base);\n  cursor: pointer;\n\n  &:focus-within .checkbox__box {\n    box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default);\n  }\n}\n\n.checkbox--checked,\n.checkbox--indeterminate {\n  & .checkbox__control {\n    &:hover {\n      & .checkbox__box {\n        border-color: var(--s-interactive-primary-hovered);\n        background-color: var(--s-interactive-primary-hovered);\n      }\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-highlight);\n    color: var(--s-text-on-status);\n    background-color: var(--s-icon-highlight);\n  }\n}\n\n.checkbox--invalid {\n  &.checkbox--checked,\n  &.checkbox--indeterminate {\n    & .checkbox__box {\n      background-color: var(--s-icon-critical);\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-critical);\n  }\n}\n\n.checkbox--disabled {\n  cursor: default;\n\n  &.checkbox--checked,\n  &.checkbox--indeterminate {\n    & .checkbox__control {\n      &:hover {\n        & .checkbox__box {\n          border-color: var(--s-icon-disabled);\n          background-color: var(--s-icon-disabled);\n        }\n      }\n    }\n\n    & .checkbox__box {\n      background-color: var(--s-icon-disabled);\n    }\n  }\n\n  & .checkbox__control {\n    &:hover {\n      & .checkbox__box {\n        background-color: transparent;\n      }\n    }\n  }\n\n  & .checkbox__box {\n    border-color: var(--s-icon-disabled);\n  }\n\n  & .checkbox__label,\n  & .checkbox__description {\n    color: var(--s-text-disabled);\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  top: 0.125rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: var(--s-space-2);\n  flex-shrink: 0;\n\n  &:hover {\n    & .checkbox__box {\n      background-color: var(--s-action-neutral-hovered);\n    }\n  }\n}\n\n.checkbox__box {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  border: 0.125rem solid var(--s-icon-default);\n  border-radius: var(--s-border-radius-s);\n}\n\n.checkbox__icon {\n  display: inline-flex;\n  width: 1.0625rem;\n  height: 1.0625rem;\n\n  & > *::part(icon) {\n    width: 1.0625rem;\n    height: 1.0625rem;\n  }\n}\n\n.checkbox__indeterminate-icon {\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  &:after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 0.625rem;\n    height: 0.125rem;\n    border-radius: 0.0625rem;\n    background-color: currentColor;\n    content: \"\";\n    transform: translate3d(-50%, -50%, 0);\n  }\n}\n\n.checkbox__label-container {\n  display: inline-flex;\n  margin-left: var(--s-space-8);\n  padding-top: var(--s-space-4);\n  align-items: flex-start;\n  flex-direction: column;\n}\n\n.checkbox__label {\n  font-weight: var(--s-font-weight-medium);\n}\n\n.checkbox__description {\n  color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipCheckboxState = boolean | \"true\" | \"false\" | \"indeterminate\";\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  styleUrl: \"flip-checkbox.css\",\n  tag: \"flip-checkbox\",\n})\nexport class FlipCheckbox {\n  @Prop({ mutable: true }) checked?: FlipCheckboxState = false;\n  @Prop() description?: string;\n  @Prop() disabled?: boolean = false;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() invalid?: boolean;\n  @Prop() label?: string;\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  private onChange = () => {\n    this.checked =\n      this.checked === true || this.checked === \"true\" ? false : true;\n\n    this.valueChange.emit(this.checked);\n  };\n\n  render() {\n    const unchecked = this.checked === false || this.checked === \"false\";\n    const checked = this.checked === true || this.checked === \"true\";\n    const indeterminate = this.checked === \"indeterminate\";\n\n    const showLabelContainer = Boolean(this.label) || Boolean(this.description);\n\n    const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const className = classnames(\"checkbox\", {\n      \"checkbox--checked\": checked,\n      \"checkbox--disabled\": this.disabled,\n      \"checkbox--indeterminate\": indeterminate,\n      \"checkbox--invalid\": this.invalid,\n      \"checkbox--unchecked\": unchecked,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span class=\"checkbox__control\">\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                aria-describedby={this.flipAriaDescribedby}\n                aria-invalid={ariaInvalid}\n                checked={checked}\n                class=\"checkbox__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                indeterminate={indeterminate}\n                name={this.inputName}\n                onChange={this.onChange}\n                type=\"checkbox\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span aria-hidden=\"true\" class=\"checkbox__box\">\n              <span class=\"checkbox__icon\">\n                {checked && <flip-icon-check-strong></flip-icon-check-strong>}\n                {indeterminate && (\n                  <span class=\"checkbox__indeterminate-icon\"></span>\n                )}\n              </span>\n            </span>\n          </span>\n          {showLabelContainer && (\n            <span class=\"checkbox__label-container\">\n              {this.label && <span class=\"checkbox__label\">{this.label}</span>}\n              {this.description && (\n                <span class=\"checkbox__description\">{this.description}</span>\n              )}\n            </span>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/flip-date-picker_3.cjs.entry.js

@@ -36,7 +36,7 @@ exports.default = _default;
 
 const localeEn = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(en);
 
-const flipDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.air-datepicker--pointer{display:none}.air-datepicker-nav{display:flex;margin-bottom:var(--s-space-8);align-items:center;gap:var(--s-space-4)}.air-datepicker-nav--action{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-highlight);cursor:pointer;order:2}.air-datepicker-nav--action:hover{background-color:var(--s-surface-overlay-hovered)}.air-datepicker-nav--title{padding:var(--s-space-8);flex-grow:1;border-radius:var(--s-border-radius-s);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer;order:0}.air-datepicker-nav--title i{font-style:normal}.air-datepicker-body--day-names{display:flex;margin-bottom:var(--s-space-8);justify-content:space-between;align-items:center}.air-datepicker-body--day-name{display:inline-flex;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);aspect-ratio:1}.air-datepicker-body--cells{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between}.air-datepicker-body--cells.-months-{gap:var(--s-space-2)}.air-datepicker-cell{position:relative;display:inline-flex;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.air-datepicker-cell:not(.-month-):not(.-year-):not(.-in-range-):hover:before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-overlay-hovered);content:\"\";inset:0}.air-datepicker-cell.-month-,.air-datepicker-cell.-year-{height:2.5rem;flex-basis:calc(100 / 3 * 1% - var(--s-space-2) * 2);border-radius:var(--s-border-radius-s);aspect-ratio:auto}.air-datepicker-cell.-month-.-in-range-:before,.air-datepicker-cell.-year-.-in-range-:before{border-radius:var(--s-border-radius-s)}.air-datepicker-cell.-month-:hover:not(.-in-range-):not(.-selected-),.air-datepicker-cell.-year-:hover:not(.-in-range-):not(.-selected-){background-color:var(--s-surface-overlay-hovered)}.air-datepicker-cell.-other-month-{color:var(--s-text-subdued)}.air-datepicker-cell.-current-:not(.-month-):not(.-year-):after{position:absolute;z-index:-1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:50%;content:\"\";inset:0}.air-datepicker-cell.-selected-{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-selected-.-year-,.air-datepicker-cell.-selected-.-month-{background-color:var(--s-surface-highlight-default)}.air-datepicker-cell.-selected-:not(.-month-):not(.-year-):not(.-in-range-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-disabled-{color:var(--s-text-subdued);cursor:default}.air-datepicker-cell.-disabled-:hover{background-color:transparent}.air-datepicker-cell.-in-range-:before{position:absolute;z-index:-1;top:0.0625rem;right:0;bottom:0.0625rem;left:0;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):hover{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):after{position:absolute;z-index:-1;top:0.0625rem;right:0;bottom:0.0625rem;left:50%;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):hover{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):after{position:absolute;z-index:-1;top:0.0625rem;right:50%;bottom:0.0625rem;left:0;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.-hidden-{display:none}";
+const flipDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.air-datepicker--pointer{display:none}.air-datepicker-nav{display:flex;margin-bottom:var(--s-space-8);align-items:center}.air-datepicker-nav--action{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border-radius:50%;color:var(--s-icon-highlight);cursor:pointer;order:2}.air-datepicker-nav--action:hover{background-color:var(--s-surface-overlay-hovered)}.air-datepicker-nav--title{padding:var(--s-space-8);flex-grow:1;border-radius:var(--s-border-radius-s);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer;order:0}.air-datepicker-nav--title i{font-style:normal}.air-datepicker-body--day-names{display:flex;margin-bottom:var(--s-space-8);justify-content:space-between;align-items:center}.air-datepicker-body--day-name{display:inline-flex;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);aspect-ratio:1}.air-datepicker-body--cells{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between}.air-datepicker-body--cells.-months-{gap:var(--s-space-2)}.air-datepicker-cell{position:relative;display:inline-flex;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.air-datepicker-cell:not(.-month-):not(.-year-):not(.-in-range-):hover:before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-overlay-hovered);content:\"\";inset:0}.air-datepicker-cell.-month-,.air-datepicker-cell.-year-{height:2.5rem;flex-basis:calc(100 / 3 * 1% - var(--s-space-2) * 2);border-radius:var(--s-border-radius-s);aspect-ratio:auto}.air-datepicker-cell.-month-.-in-range-:before,.air-datepicker-cell.-year-.-in-range-:before{border-radius:var(--s-border-radius-s)}.air-datepicker-cell.-month-:hover:not(.-in-range-):not(.-selected-),.air-datepicker-cell.-year-:hover:not(.-in-range-):not(.-selected-){background-color:var(--s-surface-overlay-hovered)}.air-datepicker-cell.-other-month-{color:var(--s-text-subdued)}.air-datepicker-cell.-current-:not(.-month-):not(.-year-):after{position:absolute;z-index:-1;border:var(--s-border-width-default) solid var(--s-border-highlight);border-radius:50%;content:\"\";inset:0}.air-datepicker-cell.-selected-{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-selected-.-year-,.air-datepicker-cell.-selected-.-month-{background-color:var(--s-surface-highlight-default)}.air-datepicker-cell.-selected-:not(.-month-):not(.-year-):not(.-in-range-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-disabled-{color:var(--s-text-subdued);cursor:default}.air-datepicker-cell.-disabled-:hover{background-color:transparent}.air-datepicker-cell.-in-range-:before{position:absolute;z-index:-1;top:0.0625rem;right:0;bottom:0.0625rem;left:0;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):hover{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-range-from-:not(.-month-):not(.-year-):not(.-range-to-):after{position:absolute;z-index:-1;top:0.0625rem;right:0;bottom:0.0625rem;left:50%;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):hover{color:var(--s-text-on-surface-highlight)}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):before{position:absolute;z-index:-1;border-radius:50%;background-color:var(--s-surface-highlight-default);content:\"\";inset:0}.air-datepicker-cell.-range-to-:not(.-month-):not(.-year-):not(.-range-from-):after{position:absolute;z-index:-1;top:0.0625rem;right:50%;bottom:0.0625rem;left:0;border-radius:0;background-color:var(--s-surface-highlight-default);content:\"\";opacity:0.2}.-hidden-{display:none}";
 
 const FlipDatePicker = class {
   constructor(hostRef) {
@@ -111,7 +111,7 @@ const FlipIconToday = class {
 };
 FlipIconToday.style = flipIconCss;
 
-const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-xl);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
+const flipPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}";
 
 const FlipPopover = class {
   constructor(hostRef) {
@@ -158,6 +158,9 @@ const FlipPopover = class {
         strategy: "fixed",
       });
     };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -192,7 +195,7 @@ const FlipPopover = class {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /**
    * Open the popover.
@@ -219,23 +222,28 @@ const FlipPopover = class {
     });
   }
   connectTrigger() {
-    var _a;
-    const triggerComponent = utils.querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
-    this.triggerEl = ((triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.children[0]) ||
-      ((_a = triggerComponent === null || triggerComponent === void 0 ? void 0 : triggerComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0]) ||
-      triggerComponent);
+    this.triggerEl = utils.querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
     if (!Boolean(this.triggerEl)) {
       return;
     }
     this.triggerEl.addEventListener("click", this.toggle);
   }
+  getNativeTriggerElement() {
+    var _a, _b, _c;
+    return this.triggerEl.tagName.startsWith("FLIP-")
+      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+        this.triggerEl)
+      : this.triggerEl;
+  }
   updateTriggerAttributes() {
     if (!Boolean(this.triggerEl)) {
       return;
     }
-    this.triggerEl.setAttribute("aria-controls", this.popoverId);
-    this.triggerEl.setAttribute("aria-expanded", String(this.active));
-    this.triggerEl.setAttribute("aria-haspopup", "dialog");
+    const nativeTriggerEl = this.getNativeTriggerElement();
+    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+    nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
   }
   updateChildMenuItems() {
     this.childMenuItems = utils.querySelectorAllDeep(this.el, '[role="menuitem"]');
@@ -260,7 +268,7 @@ const FlipPopover = class {
     return (index.h(index.Host, { id: this.popoverId, onFocusout: this.onFocusOut }, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (el) => (this.contentContainer = el), style: {
         top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
         left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-      } }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, index.h("slot", null))), this.active && (index.h("div", { class: "popover__backdrop", onClick: this.close })))));
+      } }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, index.h("slot", null))), this.active && (index.h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
   }
   get el() { return index.getElement(this); }
 };