@getflip/swirl-components 0.4.0 → 0.6.0

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

@@ -1 +0,0 @@
-{"file":"flip-banner.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ikFAAikF;;ACoBvlF,MAAM,qBAAqB,GAA0C;EACnE,OAAO,EAAE,SAAS;EAClB,QAAQ,EAAE,qCAAqC;EAC/C,OAAO,EAAE,mDAAmD;EAC5D,OAAO,EAAE,yCAAyC;EAClD,IAAI,EAAE,mCAAmC;CAC1C,CAAC;MAOWA,YAAU;EALvB;;;;;;IAUU,gBAAW,GAAa,KAAK,CAAC;IAC9B,iBAAY,GAAY,SAAS,CAAC;IAClC,eAAU,GAAwB,QAAQ,CAAC;IAC3C,WAAM,GAAsB,SAAS,CAAC;IACtC,aAAQ,GAAa,KAAK,CAAC;IAKnC,aAAQ,GAAG,CAAC,KAAiB;MAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzB,CAAC;IAEF,cAAS,GAAG,CAAC,KAAiB;MAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAwDH;EAtDC,MAAM;IACJ,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAAE;MACtE,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,+BACmB,SAAS,EAC1B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,IAEV,QAAQ,KACP,2BACc,MAAM,EAClB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,GACT,CACT,EACD,YAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAC,SAAS,IACvC,IAAI,CAAC,OAAO,CACR,EACN,YAAY,KACX,YAAM,KAAK,EAAC,kBAAkB,IAC3B,IAAI,CAAC,WAAW,KACf,cACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,WAAW,CACV,CACV,EACA,IAAI,CAAC,WAAW,KACf,4BACc,IAAI,CAAC,YAAY,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEb,0BAAmC,CAC5B,CACV,CACI,CACR,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipBanner"],"sources":["./src/components/flip-banner/flip-banner.css?tag=flip-banner&encapsulation=shadow","./src/components/flip-banner/flip-banner.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.banner {\n  display: flex;\n  max-width: 100%;\n  padding: var(--s-space-12);\n  align-items: flex-start;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n  @media (--from-tablet) {\n    padding: var(--s-space-16);\n  }\n}\n\n.banner--intent-default,\n.banner--intent-critical,\n.banner--intent-success,\n.banner--intent-info {\n  & .banner__icon,\n  & .banner__content,\n  & .banner__action-button,\n  & .banner__dismiss-button {\n    color: var(--s-text-on-status);\n  }\n}\n\n.banner--intent-default {\n  background-color: var(--s-surface-neutral-default);\n}\n\n.banner--intent-critical {\n  background-color: var(--s-surface-critical-default);\n}\n\n.banner--intent-success {\n  background-color: var(--s-surface-success-default);\n}\n\n.banner--intent-info {\n  background-color: var(--s-surface-info-default);\n}\n\n.banner--intent-warning {\n  background-color: var(--s-surface-warning-default);\n\n  & .banner__icon {\n    color: var(--s-icon-strong);\n  }\n\n  & .banner__content,\n  & .banner__action-button,\n  & .banner__dismiss-button {\n    color: var(--s-text-default);\n  }\n}\n\n.banner--has-icon {\n  & .banner__content {\n    @media (--from-mobile) {\n      padding-top: var(--s-space-2);\n    }\n  }\n}\n\n.banner__icon {\n  display: none;\n  margin-right: var(--s-space-8);\n  color: var(--s-icon-on-status);\n\n  @media (--from-mobile) {\n    display: inline-flex;\n  }\n}\n\n.banner__content {\n  min-height: 1.5rem;\n  margin-right: var(--s-space-12);\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n}\n\n.banner__controls {\n  display: inline-flex;\n  margin-left: var(--s-space-16);\n  align-items: center;\n  gap: var(--s-space-16);\n  line-height: var(--s-line-height-base);\n\n  @media (--from-tablet) {\n    gap: var(--s-space-24);\n  }\n}\n\n.banner__action-button,\n.banner__dismiss-button {\n  display: inline-flex;\n  overflow: hidden;\n  max-width: 7rem;\n  height: 1.5rem;\n  padding: 0;\n  flex-shrink: 0;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  font-weight: var(--s-font-weight-semibold);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n  @media (--from-tablet) {\n    max-width: 12rem;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipBannerAriaRole = \"alert\" | \"status\";\n\nexport type FlipBannerIntent =\n  | \"default\"\n  | \"critical\"\n  | \"success\"\n  | \"warning\"\n  | \"info\";\n\nconst flipBannerIconMapping: { [key in FlipBannerIntent]: string } = {\n  default: undefined,\n  critical: \"<flip-icon-error></flip-icon-error>\",\n  success: \"<flip-icon-check-circle></flip-icon-check-circle>\",\n  warning: \"<flip-icon-warning></flip-icon-warning>\",\n  info: \"<flip-icon-info></flip-icon-info>\",\n};\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-banner.css\",\n  tag: \"flip-banner\",\n})\nexport class FlipBanner {\n  @Element() element: HTMLElement;\n\n  @Prop() actionLabel?: string;\n  @Prop() content!: string;\n  @Prop() dismissable?: boolean = false;\n  @Prop() dismissLabel?: string = \"Dismiss\";\n  @Prop() importance?: FlipBannerAriaRole = \"status\";\n  @Prop() intent?: FlipBannerIntent = \"default\";\n  @Prop() showIcon?: boolean = false;\n\n  @Event() action?: EventEmitter<MouseEvent>;\n  @Event() dismiss?: EventEmitter<MouseEvent>;\n\n  onAction = (event: MouseEvent) => {\n    this.action.emit(event);\n  };\n\n  onDismiss = (event: MouseEvent) => {\n    this.dismiss.emit(event);\n  };\n\n  render() {\n    const icon = flipBannerIconMapping[this.intent];\n    const showControls = Boolean(this.actionLabel) || this.dismissable;\n    const showIcon = this.showIcon && Boolean(icon);\n\n    const className = classnames(\"banner\", `banner--intent-${this.intent}`, {\n      \"banner--has-icon\": showIcon,\n    });\n\n    return (\n      <Host>\n        <div\n          aria-describedby=\"content\"\n          class={className}\n          role={this.importance}\n          tabIndex={0}\n        >\n          {showIcon && (\n            <span\n              aria-hidden=\"true\"\n              class=\"banner__icon\"\n              innerHTML={icon}\n            ></span>\n          )}\n          <span class=\"banner__content\" id=\"content\">\n            {this.content}\n          </span>\n          {showControls && (\n            <span class=\"banner__controls\">\n              {this.actionLabel && (\n                <button\n                  class=\"banner__action-button\"\n                  onClick={this.onAction}\n                  type=\"button\"\n                >\n                  {this.actionLabel}\n                </button>\n              )}\n              {this.dismissable && (\n                <button\n                  aria-label={this.dismissLabel}\n                  class=\"banner__dismiss-button\"\n                  onClick={this.onDismiss}\n                  type=\"button\"\n                >\n                  <flip-icon-close></flip-icon-close>\n                </button>\n              )}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"flip-button-group.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1 +0,0 @@
-{"file":"flip-button-group2.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,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,IAAI,CAAC,SAAS;KAC1C,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,kBACE,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,IAEf,eAAa,CACF,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/flip-button.js.map

@@ -1 +0,0 @@
-{"file":"flip-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/flip-button2.js.map

@@ -1 +0,0 @@
-{"file":"flip-button2.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,GAAG,UAAU,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,QACE,EAAC,IAAI,QACH,EAAC,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,KACR,YACE,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,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1D,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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/components/flip-checkbox.js.map

@@ -1 +0,0 @@
-{"file":"flip-checkbox.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,ygHAAygH;;MCiBphHA,cAAY;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,GAAG,UAAU,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,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,mBAAmB,IAC7B,gCACE,6BACgB,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,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,eAAe,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IACzB,OAAO,IAAI,iCAAiD,EAC5D,aAAa,KACZ,YAAM,KAAK,EAAC,8BAA8B,GAAQ,CACnD,CACI,CACF,CACF,EACN,kBAAkB,KACjB,YAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC/D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9D,CACI,CACR,CACK,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipCheckbox"],"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/components/flip-chip.js.map

@@ -1 +0,0 @@
-{"file":"flip-chip.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,o7CAAo7C;;MCU37CA,UAAQ;EALrB;;;;IAQU,WAAM,GAAoB,SAAS,CAAC;IACpC,gBAAW,GAAa,KAAK,CAAC;GAoEvC;EA9DC,gBAAgB;IACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAEO,gBAAgB;IACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;MAC3B,OAAO;KACR;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAE1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IACvC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAEnC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;GACpC;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,GAAG,GAAG,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEjD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE;MAClE,mBAAmB,EAAE,IAAI,CAAC,WAAW;KACtC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,IACjE,UAAU,KACT,YACE,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,CAAC,MAAM,EACtB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,GAC3B,CACT,EACA,QAAQ,KACP,YACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT,EACD,YAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,CACzC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipChip"],"sources":["./src/components/flip-chip/flip-chip.css?tag=flip-chip&encapsulation=shadow","./src/components/flip-chip/flip-chip.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.chip {\n  display: inline-flex;\n  max-width: 100%;\n  height: 2.5rem;\n  padding-right: var(--s-space-16);\n  padding-left: var(--s-space-16);\n  align-items: center;\n  border: 0.0625rem solid var(--s-border-default);\n  border-radius: 1.25rem;\n  color: var(--s-text-subdued);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\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}\n\n.chip--interactive {\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--s-surface-overlay-hovered);\n\n    & ::part(avatar) {\n      background-color: var(--s-surface-raised-hovered);\n    }\n  }\n\n  &:active {\n    background-color: var(--s-surface-overlay-pressed);\n\n    & ::part(avatar) {\n      background-color: var(--s-surface-raised-pressed);\n    }\n  }\n}\n\n.chip--intent-critical {\n  border-color: var(--s-border-critical);\n  color: var(--s-text-critical);\n\n  & .chip__icon {\n    color: var(--s-icon-critical);\n  }\n}\n\n.chip--intent-success {\n  border-color: var(--s-border-success);\n  color: var(--s-text-success);\n\n  & .chip__icon {\n    color: var(--s-icon-success);\n  }\n}\n\n.chip__avatar,\n.chip__icon {\n  display: inline-flex;\n  margin-right: var(--s-space-8);\n  flex-shrink: 0;\n}\n\n.chip__avatar {\n  overflow: hidden;\n  width: 1.75rem;\n  height: 1.75rem;\n  margin-left: -0.625rem;\n}\n\n.chip__icon {\n  margin-left: -0.25rem;\n  color: var(--s-icon-default);\n}\n\n.chip__label {\n  overflow: hidden;\n  flex-grow: 1;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipChipIntent = \"default\" | \"critical\" | \"success\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-chip.css\",\n  tag: \"flip-chip\",\n})\nexport class FlipChip {\n  @Prop() avatar?: string;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipChipIntent = \"default\";\n  @Prop() interactive?: boolean = false;\n  @Prop() label!: string;\n\n  private avatarEl: HTMLElement;\n  private iconEl: HTMLElement;\n\n  componentDidLoad() {\n    this.forceAvatarProps();\n    this.forceIconProps();\n  }\n\n  private forceAvatarProps() {\n    if (!Boolean(this.avatarEl)) {\n      return;\n    }\n\n    const avatar = this.avatarEl.querySelector(\"flip-avatar\");\n\n    avatar?.removeAttribute(\"badge\");\n    avatar?.removeAttribute(\"interactive\");\n    avatar?.removeAttribute(\"show-label\");\n    avatar?.removeAttribute(\"variant\");\n\n    avatar?.setAttribute(\"size\", \"xs\");\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 Tag = this.interactive ? \"button\" : \"span\";\n\n    const showAvatar = Boolean(this.avatar);\n    const showIcon = !showAvatar && Boolean(this.icon);\n\n    const className = classnames(\"chip\", `chip--intent-${this.intent}`, {\n      \"chip--interactive\": this.interactive,\n    });\n\n    return (\n      <Host>\n        <Tag class={className} type={this.interactive ? \"button\" : undefined}>\n          {showAvatar && (\n            <span\n              class=\"chip__avatar\"\n              innerHTML={this.avatar}\n              ref={(el) => (this.avatarEl = el)}\n            ></span>\n          )}\n          {showIcon && (\n            <span\n              class=\"chip__icon\"\n              innerHTML={this.icon}\n              ref={(el) => (this.iconEl = el)}\n            ></span>\n          )}\n          <span class=\"chip__label\">{this.label}</span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}