@getflip/swirl-components 0.2.0 → 0.3.0

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

@@ -2,14 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+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__left-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__left-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__left-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__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__left-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__left-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__left-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__left-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__left-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__left-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__left-icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__left-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__left-icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__left-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__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-radius:50%}.button--icon-only.sc-flip-button .button__left-icon.sc-flip-button{margin-left:0}.button__left-icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default)}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+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 FlipButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.iconPosition = "start";
     this.intent = "default";
     this.size = "m";
     this.type = "button";
@@ -29,13 +31,20 @@ const FlipButton = class {
     const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
       (this.variant === "floating" && this.intent === "default");
     const isLink = Boolean(this.href);
-    const className = index$1.classnames("button", `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+    const ariaLabel = Boolean(this.flipAriaLabel)
+      ? this.flipAriaLabel
+      : hideLabel
+        ? this.label
+        : undefined;
+    const className = index$1.classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
       "button--icon-only": hideLabel,
     });
     const Tag = isLink ? "a" : "button";
-    return (index.h(index.Host, null, index.h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (index.h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && index.h("span", { class: "button__label" }, this.label))));
+    return (index.h(index.Host, null, index.h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (index.h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && index.h("span", { class: "button__label" }, this.label))));
   }
 };
 FlipButton.style = flipButtonCss;
 
 exports.flip_button = FlipButton;
+
+//# sourceMappingURL=flip-button.cjs.entry.js.map

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

@@ -0,0 +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}

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+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)}";
 
@@ -37,9 +38,11 @@ const FlipCheckbox = class {
       "checkbox--invalid": this.invalid,
       "checkbox--unchecked": unchecked,
     });
-    return (index.h(index.Host, null, index.h("label", { class: className, htmlFor: this.inputId }, index.h("span", { class: "checkbox__control" }, index.h("flip-visually-hidden", null, index.h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), index.h("span", { "aria-hidden": "true", class: "checkbox__box" }, index.h("span", { class: "checkbox__icon" }, checked && index.h("flip-icon-check-strong", null), indeterminate && (index.h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (index.h("span", { class: "checkbox__label-container" }, this.label && index.h("span", { class: "checkbox__label" }, this.label), this.description && (index.h("span", { class: "checkbox__description" }, this.description)))))));
+    return (index.h(index.Host, null, index.h("label", { class: className, htmlFor: this.inputId }, index.h("span", { class: "checkbox__control" }, index.h("flip-visually-hidden", null, index.h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.flipAriaDescribedby, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), index.h("span", { "aria-hidden": "true", class: "checkbox__box" }, index.h("span", { class: "checkbox__icon" }, checked && index.h("flip-icon-check-strong", null), indeterminate && (index.h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (index.h("span", { class: "checkbox__label-container" }, this.label && index.h("span", { class: "checkbox__label" }, this.label), this.description && (index.h("span", { class: "checkbox__description" }, this.description)))))));
   }
 };
 FlipCheckbox.style = flipCheckboxCss;
 
 exports.flip_checkbox = FlipCheckbox;
+
+//# sourceMappingURL=flip-checkbox.cjs.entry.js.map

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

@@ -0,0 +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}

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 
 const flipChipCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -48,3 +49,5 @@ const FlipChip = class {
 FlipChip.style = flipChipCss;
 
 exports.flip_chip = FlipChip;
+
+//# sourceMappingURL=flip-chip.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"flip-chip.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,WAAW,GAAG,o7CAAo7C;;MCU37C,QAAQ;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,GAAGA,kBAAU,CAAC,MAAM,EAAE,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE;MAClE,mBAAmB,EAAE,IAAI,CAAC,WAAW;KACtC,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,QAAC,GAAG,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,IACjE,UAAU,KACTA,kBACE,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,KACPA,kBACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,GACzB,CACT,EACDA,kBAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,CACzC,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"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}