npm - @getflip/swirl-components - Versions diffs - 0.3.0 → 0.4.0 - Mend

@getflip/swirl-components 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (284) hide show

package/dist/esm/flip-button-group.entry.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
-const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
+const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:\"\";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--flip-button-border-top-right-radius:0;--flip-button-border-top-left-radius:0;--flip-button-border-bottom-right-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--flip-button-border-top-right-radius:0;--flip-button-border-bottom-right-radius:0;--flip-icon-button-border-top-right-radius:0;--flip-icon-button-border-bottom-right-radius:0;--flip-icon-button-border-top-left-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--flip-button-border-top-left-radius:0;--flip-button-border-bottom-left-radius:0;--flip-icon-button-border-top-right-radius:var(--s-border-radius-base);--flip-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--flip-icon-button-border-top-left-radius:0;--flip-icon-button-border-bottom-left-radius:0}";
 const FlipButtonGroup = class {
   constructor(hostRef) {
@@ -8,11 +10,15 @@ const FlipButtonGroup = class {
     this.orientation = "horizontal";
   }
   render() {
+    const spacing = this.segmented ? "0" : "8";
+    const className = classnames("button-group", {
+      "button-group--segmented": this.segmented,
+    });
     return (h(Host, null, h("flip-stack", { align: this.orientation === "vertical" && this.stretch
         ? "stretch"
-        : "start", class: "button-group", justify: this.orientation === "horizontal" && this.stretch
+        : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
         ? "stretch"
-        : "start", orientation: this.orientation, role: "group", spacing: "8", wrap: this.wrap }, h("slot", null))));
+        : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", null))));
   }
 };
 FlipButtonGroup.style = flipButtonGroupCss;

package/dist/esm/flip-button-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-button-group.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,~~oDAAoD~~;;~~MCUlE~~,eAAe;EAL5B;;IAMU,gBAAW,~~GAA+B~~,YAAY,CAAC;~~GA6BhE~~;~~EAzBC~~,MAAM;IACJ,QACE,EAAC,IAAI,QACH,kBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC3C,SAAS;UACT,OAAO,EAEb,KAAK,~~EAAC~~,~~cAAc~~,~~EACpB~~,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC7C,SAAS;UACT,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,~~EAAC~~,~~GAAG~~,~~EACX~~,IAAI,EAAE,IAAI,CAAC,IAAI,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","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n shadow: true,\n styleUrl: \"flip-button-group.css\",\n tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n @Prop() orientation: FlipButtonGroupOrientation = \"horizontal\";\n @Prop() stretch: boolean;\n @Prop() wrap: boolean;\n\n render() {\n return (\n <Host>\n <flip-stack\n align={\n this.orientation === \"vertical\" && this.stretch\n ? \"stretch\"\n : \"start\"\n }\n class~~=\"button-group~~\"\n justify={\n this.orientation === \"horizontal\" && this.stretch\n ? \"stretch\"\n : \"start\"\n }\n orientation={this.orientation}\n role=\"group\"\n spacing~~=\"8~~\"\n wrap={this.wrap}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-button-group.entry.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/esm/flip-button.entry.js CHANGED Viewed

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

package/dist/esm/flip-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-button.entry.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,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-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}
1	+ {"file":"flip-button.entry.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/esm/flip-checkbox.entry.js CHANGED Viewed

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

package/dist/esm/flip-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-checkbox.entry.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,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":[],"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}
1	+ {"file":"flip-checkbox.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,ygHAAygH;;MCiBphH,YAAY;EAZzB;;;IAa2B,YAAO,GAAuB,KAAK,CAAC;IAErD,aAAQ,GAAa,KAAK,CAAC;IAU3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO;QACV,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;MAElE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACrC,CAAC;GAkEH;EAhEC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IACjE,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,eAAe,CAAC;IAEvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAE5E,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,KAAK,IAAI;QACjB,MAAM;QACN,IAAI,CAAC,OAAO,KAAK,KAAK;UACtB,OAAO;UACP,SAAS,CAAC;IAEhB,MAAM,SAAS,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":[],"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/esm/flip-date-picker_3.entry.js CHANGED Viewed

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