@moni-labs/moni-ui 0.2.0

package/dist/components/moni-shape.d.ts

@@ -0,0 +1,30 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only shape helper.
+ *
+ * Supports Material 3 generic shapes (rounded, circle, …) and expressive
+ * SVG masks (heart, star, boom, sided-cookie12, …).
+ *
+ * @example
+ * <moni-shape type="rounded" border shadow>
+ *   <p>Some content</p>
+ * </moni-shape>
+ * <moni-shape type="heart" size="large"></moni-shape>
+ */
+export declare class MoniShape extends MoniElement {
+    type: 'square' | 'rounded' | 'circle' | 'top-round' | 'bottom-round' | 'left-round' | 'right-round' | 'arch' | 'arrow' | 'boom' | 'bun' | 'burst' | 'clamshell' | 'diamond' | 'fan' | 'flower' | 'gem' | 'ghost-ish' | 'heart' | 'leaf-clover4' | 'leaf-clover8' | 'loading-indicator' | 'oval' | 'pentagon' | 'pill' | 'pixel-circle' | 'pixel-triangle' | 'puffy-diamond' | 'puffy' | 'semicircle' | 'sided-cookie12' | 'sided-cookie4' | 'sided-cookie6' | 'sided-cookie7' | 'sided-cookie9' | 'slanted' | 'soft-boom' | 'soft-burst' | 'star' | 'sunny' | 'triangle' | 'very-sunny' | 'wavy-circle' | 'wavy';
+    size: 'small' | 'medium' | 'large' | 'extra';
+    border: boolean;
+    shadow: boolean;
+    shapeRadius: string;
+    color: 'primary' | 'secondary' | 'tertiary' | 'surface';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-shape': MoniShape;
+    }
+}
+export default MoniShape;
+//# sourceMappingURL=moni-shape.d.ts.map

package/dist/components/moni-shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-shape.d.ts","sourceRoot":"","sources":["../../src/components/moni-shape.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,WAAW;IACZ,IAAI,EAC9B,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,GAC7F,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,WAAW,GAAG,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,gBAAgB,GAAG,eAAe,GAAG,OAAO,GAAG,YAAY,GAAG,gBAAgB,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,MAAM,CAAa;IAC7d,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IACzC,MAAM,UAAS;IACf,MAAM,UAAS;IACH,WAAW,SAAM;IAC5C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEjG,OAAgB,MAAM,4BAkFpB;IAEO,MAAM;CAQf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD;AAED,eAAe,SAAS,CAAC"}

package/dist/components/moni-shape.js

@@ -0,0 +1,146 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Visual-only shape helper.
+ *
+ * Supports Material 3 generic shapes (rounded, circle, …) and expressive
+ * SVG masks (heart, star, boom, sided-cookie12, …).
+ *
+ * @example
+ * <moni-shape type="rounded" border shadow>
+ *   <p>Some content</p>
+ * </moni-shape>
+ * <moni-shape type="heart" size="large"></moni-shape>
+ */
+let MoniShape = class MoniShape extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'rounded';
+        this.size = 'medium';
+        this.border = false;
+        this.shadow = false;
+        this.shapeRadius = '';
+        this.color = 'primary';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				font-family: var(--font-sans);
+			}
+
+			.shape {
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: var(--_shape-size, 4rem);
+				block-size: var(--_shape-size, 4rem);
+				border-radius: var(--_radius, 1rem);
+				overflow: hidden;
+				background-color: var(--_shape-bg, var(--color-primary-container));
+				color: var(--_shape-fg, var(--color-on-primary-container));
+				mask-size: 100% 100%;
+				mask-repeat: no-repeat;
+				-webkit-mask-size: 100% 100%;
+				-webkit-mask-repeat: no-repeat;
+			}
+
+			:host([size='small']) .shape { --_shape-size: 2rem; }
+			:host([size='medium']) .shape { --_shape-size: 4rem; }
+			:host([size='large']) .shape { --_shape-size: 6rem; }
+			:host([size='extra']) .shape { --_shape-size: 8rem; }
+
+			/* Generic shapes */
+			:host([type='square']) .shape { border-radius: 0; }
+			:host([type='circle']) .shape { border-radius: 50%; aspect-ratio: 1; }
+			:host([type='top-round']) .shape { border-radius: 1rem 1rem 0 0; }
+			:host([type='bottom-round']) .shape { border-radius: 0 0 1rem 1rem; }
+			:host([type='left-round']) .shape { border-radius: 1rem 0 0 1rem; }
+			:host([type='right-round']) .shape { border-radius: 0 1rem 1rem 0; }
+
+			/* Expressive SVG masks */
+			:host([type='arch']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304'%3E%3Cpath d='M304 253.72c0 6.11 0 9.17-.31 11.74-2.38 20.05-18.18 35.85-38.23 38.23-2.57.31-5.63.31-11.74.31H50.281c-6.112 0-9.168 0-11.737-.31-20.049-2.38-35.856-18.18-38.239-38.23C0 262.89 0 259.83 0 253.72V152C0 68.05 68.053 0 152 0c83.95 0 152 68.05 152 152z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304'%3E%3Cpath d='M304 253.72c0 6.11 0 9.17-.31 11.74-2.38 20.05-18.18 35.85-38.23 38.23-2.57.31-5.63.31-11.74.31H50.281c-6.112 0-9.168 0-11.737-.31-20.049-2.38-35.856-18.18-38.239-38.23C0 262.89 0 259.83 0 253.72V152C0 68.05 68.053 0 152 0c83.95 0 152 68.05 152 152z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='arrow']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 278'%3E%3Cpath d='M271.57 122.2c-14.018-21.58-28.035-43.19-42.053-64.77-9.094-14.01-18.35-28.21-30.645-39.34-12.296-11.15-28.224-19.03-44.556-18-14.34.92-27.632 8.63-38.125 18.7S97.546 41.26 89.528 53.54C67.842 86.72 46.13 119.9 24.444 153.1 14.139 168.86 3.565 185.31.713 204.09c-3.444 22.69 5.839 45.8 22.305 60.89 17.219 15.78 45.12 14.5 66.08 10.18 22.977-4.75 45.443-13.68 68.877-13.65 20.072 0 39.471 6.6 59.004 11.4 19.506 4.77 40.466 7.71 59.3.61 23.38-8.79 40.169-33.79 39.712-59.45-.431-23.41-13.534-44.32-26.152-63.8-6.081-9.35-12.161-18.72-18.242-28.07z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 278'%3E%3Cpath d='M271.57 122.2c-14.018-21.58-28.035-43.19-42.053-64.77-9.094-14.01-18.35-28.21-30.645-39.34-12.296-11.15-28.224-19.03-44.556-18-14.34.92-27.632 8.63-38.125 18.7S97.546 41.26 89.528 53.54C67.842 86.72 46.13 119.9 24.444 153.1 14.139 168.86 3.565 185.31.713 204.09c-3.444 22.69 5.839 45.8 22.305 60.89 17.219 15.78 45.12 14.5 66.08 10.18 22.977-4.75 45.443-13.68 68.877-13.65 20.072 0 39.471 6.6 59.004 11.4 19.506 4.77 40.466 7.71 59.3.61 23.38-8.79 40.169-33.79 39.712-59.45-.431-23.41-13.534-44.32-26.152-63.8-6.081-9.35-12.161-18.72-18.242-28.07z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='boom']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M156.818 10.16c.753-6.02 1.13-9.03 1.702-9.57a2.145 2.145 0 0 1 2.96 0c.572.54.949 3.55 1.702 9.57l9.578 76.58c.304 2.43.456 3.64.892 4.15.633.72 1.668.95 2.541.54.601-.28 1.232-1.33 2.493-3.43l39.729-66.04c3.124-5.19 4.686-7.79 5.427-8.05 1.078-.37 2.26.16 2.704 1.22.305.72-.569 3.63-2.317 9.44l-22.23 73.87c-.706 2.35-1.058 3.52-.863 4.15a2.17 2.17 0 0 0 2.102 1.54c.663-.01 1.663-.71 3.663-2.11l63.01-44.08c4.956-3.47 7.433-5.2 8.214-5.14a2.177 2.177 0 0 1 1.98 2.21c-.014.79-1.988 3.09-5.935 7.68l-50.194 58.4c-1.593 1.85-2.389 2.78-2.468 3.44-.115.96.414 1.88 1.299 2.26.609.27 1.806.03 4.199-.43l75.397-14.5c5.929-1.14 8.894-1.71 9.58-1.33.998.55 1.398 1.79.915 2.83-.332.71-3.064 2-8.528 4.58l-69.478 32.83c-2.206 1.04-3.308 1.56-3.648 2.13-.493.83-.382 1.89.272 2.6.45.49 1.636.77 4.009 1.32l74.747 17.59c5.878 1.38 8.818 2.07 9.29 2.7.687.91.552 2.21-.309 2.96-.593.51-3.61.58-9.646.7l-76.75 1.57c-2.436.05-3.654.08-4.195.46a2.19 2.19 0 0 0-.803 2.49c.214.63 1.184 1.37 3.126 2.85l61.173 46.62c4.81 3.67 7.216 5.51 7.393 6.27a2.18 2.18 0 0 1-1.48 2.58c-.749.23-3.531-.95-9.096-3.3l-70.749-29.95c-2.246-.95-3.369-1.43-4.019-1.3a2.18 2.18 0 0 0-1.739 1.94c-.059.66.528 1.74 1.703 3.88l37.021 67.62c2.911 5.31 4.367 7.97 4.219 8.75a2.175 2.175 0 0 1-2.395 1.75c-.778-.1-2.843-2.31-6.973-6.74l-52.517-56.3c-1.667-1.78-2.501-2.68-3.146-2.82a2.15 2.15 0 0 0-2.374 1.06c-.323.58-.22 1.8-.015 4.24l6.467 76.91c.509 6.05.763 9.07.315 9.72a2.16 2.16 0 0 1-2.895.62c-.672-.41-1.663-3.28-3.645-9.01l-25.204-72.9c-.8-2.32-1.2-3.47-1.73-3.87a2.16 2.16 0 0 0-2.598 0c-.53.4-.93 1.55-1.73 3.87l-25.204 72.9c-1.982 5.73-2.973 8.6-3.645 9.01-.976.59-2.242.32-2.895-.62-.448-.65-.194-3.67.315-9.72l6.467-76.91c.205-2.44.308-3.66-.015-4.24a2.146 2.146 0 0 0-2.373-1.06c-.646.14-1.48 1.04-3.147 2.82l-52.517 56.3c-4.13 4.43-6.195 6.64-6.973 6.74a2.175 2.175 0 0 1-2.395-1.75c-.148-.78 1.308-3.44 4.219-8.75l37.021-67.62c1.175-2.14 1.762-3.22 1.703-3.88a2.18 2.18 0 0 0-1.739-1.94c-.65-.13-1.773.35-4.019 1.3l-70.75 29.95c-5.564 2.35-8.346 3.53-9.095 3.3a2.18 2.18 0 0 1-1.48-2.58c.177-.76 2.583-2.6 7.393-6.27l61.173-46.62c1.942-1.48 2.912-2.22 3.126-2.85a2.19 2.19 0 0 0-.803-2.49c-.541-.38-1.76-.41-4.195-.46l-76.75-1.57c-6.036-.12-9.054-.19-9.646-.7a2.19 2.19 0 0 1-.309-2.96c.472-.63 3.412-1.32 9.29-2.7l74.747-17.59c2.373-.55 3.559-.83 4.01-1.32.653-.71.764-1.77.271-2.6-.34-.57-1.442-1.09-3.648-2.13L15.63 117.94c-5.464-2.58-8.196-3.87-8.528-4.58a2.18 2.18 0 0 1 .915-2.83c.686-.38 3.65.19 9.58 1.33l75.397 14.5c2.393.46 3.59.7 4.199.43a2.18 2.18 0 0 0 1.299-2.26c-.078-.66-.875-1.59-2.468-3.44L45.83 62.69c-3.947-4.59-5.92-6.89-5.935-7.68a2.18 2.18 0 0 1 1.98-2.21c.78-.06 3.258 1.67 8.214 5.14l63.01 44.08c2 1.4 3 2.1 3.663 2.11a2.17 2.17 0 0 0 2.102-1.54c.195-.63-.157-1.8-.863-4.15l-22.23-73.87c-1.748-5.81-2.622-8.72-2.317-9.44a2.17 2.17 0 0 1 2.704-1.22c.741.26 2.303 2.86 5.427 8.05L141.314 88c1.261 2.1 1.892 3.15 2.493 3.43.873.41 1.908.18 2.541-.54.436-.51.588-1.72.892-4.15z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M156.818 10.16c.753-6.02 1.13-9.03 1.702-9.57a2.145 2.145 0 0 1 2.96 0c.572.54.949 3.55 1.702 9.57l9.578 76.58c.304 2.43.456 3.64.892 4.15.633.72 1.668.95 2.541.54.601-.28 1.232-1.33 2.493-3.43l39.729-66.04c3.124-5.19 4.686-7.79 5.427-8.05 1.078-.37 2.26.16 2.704 1.22.305.72-.569 3.63-2.317 9.44l-22.23 73.87c-.706 2.35-1.058 3.52-.863 4.15a2.17 2.17 0 0 0 2.102 1.54c.663-.01 1.663-.71 3.663-2.11l63.01-44.08c4.956-3.47 7.433-5.2 8.214-5.14a2.177 2.177 0 0 1 1.98 2.21c-.014.79-1.988 3.09-5.935 7.68l-50.194 58.4c-1.593 1.85-2.389 2.78-2.468 3.44-.115.96.414 1.88 1.299 2.26.609.27 1.806.03 4.199-.43l75.397-14.5c5.929-1.14 8.894-1.71 9.58-1.33.998.55 1.398 1.79.915 2.83-.332.71-3.064 2-8.528 4.58l-69.478 32.83c-2.206 1.04-3.308 1.56-3.648 2.13-.493.83-.382 1.89.272 2.6.45.49 1.636.77 4.009 1.32l74.747 17.59c5.878 1.38 8.818 2.07 9.29 2.7.687.91.552 2.21-.309 2.96-.593.51-3.61.58-9.646.7l-76.75 1.57c-2.436.05-3.654.08-4.195.46a2.19 2.19 0 0 0-.803 2.49c.214.63 1.184 1.37 3.126 2.85l61.173 46.62c4.81 3.67 7.216 5.51 7.393 6.27a2.18 2.18 0 0 1-1.48 2.58c-.749.23-3.531-.95-9.096-3.3l-70.749-29.95c-2.246-.95-3.369-1.43-4.019-1.3a2.18 2.18 0 0 0-1.739 1.94c-.059.66.528 1.74 1.703 3.88l37.021 67.62c2.911 5.31 4.367 7.97 4.219 8.75a2.175 2.175 0 0 1-2.395 1.75c-.778-.1-2.843-2.31-6.973-6.74l-52.517-56.3c-1.667-1.78-2.501-2.68-3.146-2.82a2.15 2.15 0 0 0-2.374 1.06c-.323.58-.22 1.8-.015 4.24l6.467 76.91c.509 6.05.763 9.07.315 9.72a2.16 2.16 0 0 1-2.895.62c-.672-.41-1.663-3.28-3.645-9.01l-25.204-72.9c-.8-2.32-1.2-3.47-1.73-3.87a2.16 2.16 0 0 0-2.598 0c-.53.4-.93 1.55-1.73 3.87l-25.204 72.9c-1.982 5.73-2.973 8.6-3.645 9.01-.976.59-2.242.32-2.895-.62-.448-.65-.194-3.67.315-9.72l6.467-76.91c.205-2.44.308-3.66-.015-4.24a2.146 2.146 0 0 0-2.373-1.06c-.646.14-1.48 1.04-3.147 2.82l-52.517 56.3c-4.13 4.43-6.195 6.64-6.973 6.74a2.175 2.175 0 0 1-2.395-1.75c-.148-.78 1.308-3.44 4.219-8.75l37.021-67.62c1.175-2.14 1.762-3.22 1.703-3.88a2.18 2.18 0 0 0-1.739-1.94c-.65-.13-1.773.35-4.019 1.3l-70.75 29.95c-5.564 2.35-8.346 3.53-9.095 3.3a2.18 2.18 0 0 1-1.48-2.58c.177-.76 2.583-2.6 7.393-6.27l61.173-46.62c1.942-1.48 2.912-2.22 3.126-2.85a2.19 2.19 0 0 0-.803-2.49c-.541-.38-1.76-.41-4.195-.46l-76.75-1.57c-6.036-.12-9.054-.19-9.646-.7a2.19 2.19 0 0 1-.309-2.96c.472-.63 3.412-1.32 9.29-2.7l74.747-17.59c2.373-.55 3.559-.83 4.01-1.32.653-.71.764-1.77.271-2.6-.34-.57-1.442-1.09-3.648-2.13L15.63 117.94c-5.464-2.58-8.196-3.87-8.528-4.58a2.18 2.18 0 0 1 .915-2.83c.686-.38 3.65.19 9.58 1.33l75.397 14.5c2.393.46 3.59.7 4.199.43a2.18 2.18 0 0 0 1.299-2.26c-.078-.66-.875-1.59-2.468-3.44L45.83 62.69c-3.947-4.59-5.92-6.89-5.935-7.68a2.18 2.18 0 0 1 1.98-2.21c.78-.06 3.258 1.67 8.214 5.14l63.01 44.08c2 1.4 3 2.1 3.663 2.11a2.17 2.17 0 0 0 2.102-1.54c.195-.63-.157-1.8-.863-4.15l-22.23-73.87c-1.748-5.81-2.622-8.72-2.317-9.44a2.17 2.17 0 0 1 2.704-1.22c.741.26 2.303 2.86 5.427 8.05L141.314 88c1.261 2.1 1.892 3.15 2.493 3.43.873.41 1.908.18 2.541-.54.436-.51.588-1.72.892-4.15z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='bun']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 320'%3E%3Cpath d='M0 81.36A81.35 81.35 0 0 1 81.36 0h147.28a81.35 81.35 0 0 1 22.7 159.5.5.5 0 0 0-.37.5c0 .23.15.43.37.5a81.38 81.38 0 0 1-22.7 159.5H81.36A81.35 81.35 0 0 1 0 238.64a81.4 81.4 0 0 1 58-77.95.72.72 0 0 0 0-1.38A81.4 81.4 0 0 1 0 81.36' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 320'%3E%3Cpath d='M0 81.36A81.35 81.35 0 0 1 81.36 0h147.28a81.35 81.35 0 0 1 22.7 159.5.5.5 0 0 0-.37.5c0 .23.15.43.37.5a81.38 81.38 0 0 1-22.7 159.5H81.36A81.35 81.35 0 0 1 0 238.64a81.4 81.4 0 0 1 58-77.95.72.72 0 0 0 0-1.38A81.4 81.4 0 0 1 0 81.36' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='burst']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M157.39 2.55c.74-1.32 1.1-1.97 1.55-2.25.65-.4 1.47-.4 2.12 0 .45.28.81.93 1.55 2.25l25.26 45.15c.45.81.68 1.22.99 1.46.44.36 1.01.51 1.57.42.39-.06.79-.29 1.58-.77l44.46-26.47c1.29-.77 1.94-1.16 2.46-1.17.77-.03 1.47.38 1.84 1.05.25.47.24 1.22.22 2.73l-.7 51.73c-.02.93-.02 1.39.12 1.76.2.53.62.95 1.15 1.15.37.14.83.14 1.76.12l51.73-.7c1.51-.02 2.26-.03 2.73.22.67.37 1.08 1.07 1.05 1.84-.01.52-.4 1.17-1.17 2.46l-26.47 44.46c-.48.79-.71 1.19-.77 1.58-.09.56.06 1.13.42 1.57.24.31.65.54 1.46.99l45.15 25.26c1.32.74 1.97 1.1 2.25 1.55.4.65.4 1.47 0 2.12-.28.45-.93.81-2.25 1.55l-45.15 25.26c-.81.45-1.22.68-1.46.99-.36.44-.51 1.01-.42 1.57.06.39.29.79.77 1.58l26.47 44.46c.77 1.29 1.16 1.94 1.17 2.46.03.77-.38 1.47-1.05 1.84-.47.25-1.22.24-2.73.22l-51.73-.7c-.93-.02-1.39-.02-1.76.12-.53.2-.95.62-1.15 1.15-.14.37-.14.83-.12 1.76l.7 51.73c.02 1.51.03 2.26-.22 2.73-.37.67-1.07 1.08-1.84 1.05-.52-.01-1.17-.4-2.46-1.17l-44.46-26.47c-.79-.48-1.19-.71-1.58-.77-.56-.09-1.13.06-1.57.42-.31.24-.54.65-.99 1.46l-25.26 45.15c-.74 1.32-1.1 1.97-1.55 2.25-.65.4-1.47.4-2.12 0-.45-.28-.81-.93-1.55-2.25l-25.26-45.15c-.45-.81-.68-1.22-.99-1.46-.44-.36-1.01-.51-1.57-.42-.39.06-.79.29-1.58.77l-44.46 26.47c-1.29.77-1.94 1.16-2.46 1.17-.77.03-1.47-.38-1.84-1.05-.25-.47-.24-1.22-.22-2.73l.7-51.73c.02-.93.02-1.39-.12-1.76-.2-.53-.62-.95-1.15-1.15-.37-.14-.83-.14-1.76-.12l-51.73.7c-1.51.02-2.26.03-2.73-.22a2.01 2.01 0 0 1-1.05-1.84c.01-.52.4-1.17 1.17-2.46l26.47-44.46c.48-.79.71-1.19.77-1.58.09-.56-.06-1.13-.42-1.57-.24-.31-.65-.54-1.46-.99L2.55 162.61c-1.32-.74-1.97-1.1-2.25-1.55-.4-.65-.4-1.47 0-2.12.28-.45.93-.81 2.25-1.55l45.15-25.26c.81-.45 1.22-.68 1.46-.99.36-.44.51-1.01.42-1.57-.06-.39-.29-.79-.77-1.58L22.34 83.53c-.77-1.29-1.16-1.94-1.17-2.46-.03-.77.38-1.47 1.05-1.84.47-.25 1.22-.24 2.73-.22l51.73.7c.93.02 1.39.02 1.76-.12.53-.2.95-.62 1.15-1.15.14-.37.14-.83.12-1.76l-.7-51.73c-.02-1.51-.03-2.26.22-2.73.37-.67 1.07-1.08 1.84-1.05.52.01 1.17.4 2.46 1.17l44.46 26.47c.79.48 1.19.71 1.58.77.56.09 1.13-.06 1.57-.42.31-.24.54-.65.99-1.46z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M157.39 2.55c.74-1.32 1.1-1.97 1.55-2.25.65-.4 1.47-.4 2.12 0 .45.28.81.93 1.55 2.25l25.26 45.15c.45.81.68 1.22.99 1.46.44.36 1.01.51 1.57.42.39-.06.79-.29 1.58-.77l44.46-26.47c1.29-.77 1.94-1.16 2.46-1.17.77-.03 1.47.38 1.84 1.05.25.47.24 1.22.22 2.73l-.7 51.73c-.02.93-.02 1.39.12 1.76.2.53.62.95 1.15 1.15.37.14.83.14 1.76.12l51.73-.7c1.51-.02 2.26-.03 2.73.22.67.37 1.08 1.07 1.05 1.84-.01.52-.4 1.17-1.17 2.46l-26.47 44.46c-.48.79-.71 1.19-.77 1.58-.09.56.06 1.13.42 1.57.24.31.65.54 1.46.99l45.15 25.26c1.32.74 1.97 1.1 2.25 1.55.4.65.4 1.47 0 2.12-.28.45-.93.81-2.25 1.55l-45.15 25.26c-.81.45-1.22.68-1.46.99-.36.44-.51 1.01-.42 1.57.06.39.29.79.77 1.58l26.47 44.46c.77 1.29 1.16 1.94 1.17 2.46.03.77-.38 1.47-1.05 1.84-.47.25-1.22.24-2.73.22l-51.73-.7c-.93-.02-1.39-.02-1.76.12-.53.2-.95.62-1.15 1.15-.14.37-.14.83-.12 1.76l.7 51.73c.02 1.51.03 2.26-.22 2.73-.37.67-1.07 1.08-1.84 1.05-.52-.01-1.17-.4-2.46-1.17l-44.46-26.47c-.79-.48-1.19-.71-1.58-.77-.56-.09-1.13.06-1.57.42-.31.24-.54.65-.99 1.46l-25.26 45.15c-.74 1.32-1.1 1.97-1.55 2.25-.65.4-1.47.4-2.12 0-.45-.28-.81-.93-1.55-2.25l-25.26-45.15c-.45-.81-.68-1.22-.99-1.46-.44-.36-1.01-.51-1.57-.42-.39.06-.79.29-1.58.77l-44.46 26.47c-1.29.77-1.94 1.16-2.46 1.17-.77.03-1.47-.38-1.84-1.05-.25-.47-.24-1.22-.22-2.73l.7-51.73c.02-.93.02-1.39-.12-1.76-.2-.53-.62-.95-1.15-1.15-.37-.14-.83-.14-1.76-.12l-51.73.7c-1.51.02-2.26.03-2.73-.22a2.01 2.01 0 0 1-1.05-1.84c.01-.52.4-1.17 1.17-2.46l26.47-44.46c.48-.79.71-1.19.77-1.58.09-.56-.06-1.13-.42-1.57-.24-.31-.65-.54-1.46-.99L2.55 162.61c-1.32-.74-1.97-1.1-2.25-1.55-.4-.65-.4-1.47 0-2.12.28-.45.93-.81 2.25-1.55l45.15-25.26c.81-.45 1.22-.68 1.46-.99.36-.44.51-1.01.42-1.57-.06-.39-.29-.79-.77-1.58L22.34 83.53c-.77-1.29-1.16-1.94-1.17-2.46-.03-.77.38-1.47 1.05-1.84.47-.25 1.22-.24 2.73-.22l51.73.7c.93.02 1.39.02 1.76-.12.53-.2.95-.62 1.15-1.15.14-.37.14-.83.12-1.76l-.7-51.73c-.02-1.51-.03-2.26.22-2.73.37-.67 1.07-1.08 1.84-1.05.52.01 1.17.4 2.46 1.17l44.46 26.47c.79.48 1.19.71 1.58.77.56.09 1.13-.06 1.57-.42.31-.24.54-.65.99-1.46z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='clamshell']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 254'%3E%3Cpath d='M306.405 84.081c6.709 13.51 10.063 20.265 11.757 27.322a67.1 67.1 0 0 1 0 31.194c-1.694 7.057-5.048 13.812-11.757 27.322l-20.438 41.16c-6.709 13.51-10.063 20.265-14.472 25.501-6.375 7.568-14.411 12.963-23.236 15.597C242.155 254 235.446 254 222.028 254H97.972c-13.418 0-20.127 0-26.231-1.822-8.825-2.635-16.861-8.029-23.236-15.598-4.409-5.235-7.763-11.991-14.472-25.501l-20.438-41.16c-6.709-13.51-10.063-20.265-11.757-27.322a67.1 67.1 0 0 1 0-31.194c1.694-7.057 5.048-13.812 11.757-27.322l20.438-41.16c6.709-13.51 10.063-20.266 14.472-25.501C54.88 9.851 62.916 4.457 71.741 1.822 77.845 0 84.554 0 97.972 0h124.056c13.418 0 20.127 0 26.231 1.822 8.825 2.635 16.861 8.029 23.236 15.598 4.409 5.235 7.763 11.99 14.472 25.501z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 254'%3E%3Cpath d='M306.405 84.081c6.709 13.51 10.063 20.265 11.757 27.322a67.1 67.1 0 0 1 0 31.194c-1.694 7.057-5.048 13.812-11.757 27.322l-20.438 41.16c-6.709 13.51-10.063 20.265-14.472 25.501-6.375 7.568-14.411 12.963-23.236 15.597C242.155 254 235.446 254 222.028 254H97.972c-13.418 0-20.127 0-26.231-1.822-8.825-2.635-16.861-8.029-23.236-15.598-4.409-5.235-7.763-11.991-14.472-25.501l-20.438-41.16c-6.709-13.51-10.063-20.265-11.757-27.322a67.1 67.1 0 0 1 0-31.194c1.694-7.057 5.048-13.812 11.757-27.322l20.438-41.16c6.709-13.51 10.063-20.266 14.472-25.501C54.88 9.851 62.916 4.457 71.741 1.822 77.845 0 84.554 0 97.972 0h124.056c13.418 0 20.127 0 26.231 1.822 8.825 2.635 16.861 8.029 23.236 15.598 4.409 5.235 7.763 11.99 14.472 25.501z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='diamond']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 320'%3E%3Cpath d='M191.442 276.481c-16.836 22.033-25.254 33.049-34.976 38.067a49.02 49.02 0 0 1-44.932 0c-9.722-5.018-18.14-16.034-34.976-38.067l-55.912-73.173c-10.24-13.402-15.36-20.102-17.895-27.276a48.1 48.1 0 0 1 0-32.064c2.535-7.174 7.655-13.874 17.895-27.276l55.912-73.173c16.836-22.033 25.254-33.05 34.976-38.067a49.02 49.02 0 0 1 44.932 0c9.722 5.018 18.14 16.034 34.976 38.068l55.912 73.172c10.24 13.402 15.36 20.102 17.895 27.276a48.1 48.1 0 0 1 0 32.064c-2.535 7.174-7.655 13.874-17.895 27.276z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 320'%3E%3Cpath d='M191.442 276.481c-16.836 22.033-25.254 33.049-34.976 38.067a49.02 49.02 0 0 1-44.932 0c-9.722-5.018-18.14-16.034-34.976-38.067l-55.912-73.173c-10.24-13.402-15.36-20.102-17.895-27.276a48.1 48.1 0 0 1 0-32.064c2.535-7.174 7.655-13.874 17.895-27.276l55.912-73.173c16.836-22.033 25.254-33.05 34.976-38.067a49.02 49.02 0 0 1 44.932 0c9.722 5.018 18.14 16.034 34.976 38.068l55.912 73.172c10.24 13.402 15.36 20.102 17.895 27.276a48.1 48.1 0 0 1 0 32.064c-2.535 7.174-7.655 13.874-17.895 27.276z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='fan']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath d='M0 44.21c0-1.56 0-2.34.02-2.999C.717 18.757 18.757.717 41.211.021c.66-.021 1.44-.021 3-.021C52.53 0 56.69 0 60.208.11 179.96 3.825 276.17 100.037 279.89 219.791c.11 3.518.11 7.678.11 15.997 0 1.56 0 2.34-.02 3-.7 22.454-18.74 40.494-41.19 41.191-.66.02-1.44.02-3 .02H62.945c-19.018 0-28.528 0-36.071-2.987a42.53 42.53 0 0 1-23.887-23.887C0 245.583 0 236.073 0 217.055z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath d='M0 44.21c0-1.56 0-2.34.02-2.999C.717 18.757 18.757.717 41.211.021c.66-.021 1.44-.021 3-.021C52.53 0 56.69 0 60.208.11 179.96 3.825 276.17 100.037 279.89 219.791c.11 3.518.11 7.678.11 15.997 0 1.56 0 2.34-.02 3-.7 22.454-18.74 40.494-41.19 41.191-.66.02-1.44.02-3 .02H62.945c-19.018 0-28.528 0-36.071-2.987a42.53 42.53 0 0 1-23.887-23.887C0 245.583 0 236.073 0 217.055z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='flower']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M273.13 46.863c-11.88-11.875-38.94-6.003-71.58 12.818C191.77 23.286 176.79 0 160 0c-16.8 0-31.78 23.284-41.55 59.678-32.65-18.82-59.7-24.69-71.58-12.817-11.87 11.876-6 38.935 12.82 71.585C23.29 128.222 0 143.204 0 160c0 16.793 23.28 31.773 59.68 41.549-18.83 32.651-24.7 59.712-12.83 71.588 11.88 11.876 38.94 6.001 71.59-12.827C128.22 296.711 143.2 320 160 320c16.79 0 31.77-23.291 41.55-59.693 32.66 18.829 59.72 24.705 71.6 12.829 11.87-11.876 6-38.936-12.83-71.587C296.72 191.773 320 176.793 320 160c0-16.796-23.29-31.778-59.7-41.554 18.83-32.65 24.7-59.708 12.83-71.583' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M273.13 46.863c-11.88-11.875-38.94-6.003-71.58 12.818C191.77 23.286 176.79 0 160 0c-16.8 0-31.78 23.284-41.55 59.678-32.65-18.82-59.7-24.69-71.58-12.817-11.87 11.876-6 38.935 12.82 71.585C23.29 128.222 0 143.204 0 160c0 16.793 23.28 31.773 59.68 41.549-18.83 32.651-24.7 59.712-12.83 71.588 11.88 11.876 38.94 6.001 71.59-12.827C128.22 296.711 143.2 320 160 320c16.79 0 31.77-23.291 41.55-59.693 32.66 18.829 59.72 24.705 71.6 12.829 11.87-11.876 6-38.936-12.83-71.587C296.72 191.773 320 176.793 320 160c0-16.796-23.29-31.778-59.7-41.554 18.83-32.65 24.7-59.708 12.83-71.583' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='gem']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302 312'%3E%3Cpath d='M92.48 26.632c18.16-13.196 27.25-19.794 36.93-23.074a67.3 67.3 0 0 1 43.18 0c9.68 3.28 18.77 9.878 36.93 23.074l40.85 29.673c10.79 7.836 16.19 11.754 20.58 16.458a67.2 67.2 0 0 1 14.32 23.618c2.14 6.073 3.11 12.667 5.07 25.855l7.56 51.001c3.43 23.136 5.15 34.704 3.42 45.13a67.3 67.3 0 0 1-21.46 39.064c-7.87 7.055-18.56 11.814-39.93 21.332l-48.41 21.563c-12.9 5.744-19.35 8.615-25.97 10.083a67.3 67.3 0 0 1-29.1 0c-6.62-1.468-13.07-4.339-25.97-10.083l-48.41-21.563c-21.37-9.518-32.06-14.277-39.93-21.332A67.3 67.3 0 0 1 .68 218.367c-1.73-10.426-.01-21.994 3.42-45.13l7.56-51.001c1.96-13.188 2.93-19.782 5.07-25.855a67.2 67.2 0 0 1 14.32-23.618c4.39-4.704 9.79-8.622 20.58-16.458z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 302 312'%3E%3Cpath d='M92.48 26.632c18.16-13.196 27.25-19.794 36.93-23.074a67.3 67.3 0 0 1 43.18 0c9.68 3.28 18.77 9.878 36.93 23.074l40.85 29.673c10.79 7.836 16.19 11.754 20.58 16.458a67.2 67.2 0 0 1 14.32 23.618c2.14 6.073 3.11 12.667 5.07 25.855l7.56 51.001c3.43 23.136 5.15 34.704 3.42 45.13a67.3 67.3 0 0 1-21.46 39.064c-7.87 7.055-18.56 11.814-39.93 21.332l-48.41 21.563c-12.9 5.744-19.35 8.615-25.97 10.083a67.3 67.3 0 0 1-29.1 0c-6.62-1.468-13.07-4.339-25.97-10.083l-48.41-21.563c-21.37-9.518-32.06-14.277-39.93-21.332A67.3 67.3 0 0 1 .68 218.367c-1.73-10.426-.01-21.994 3.42-45.13l7.56-51.001c1.96-13.188 2.93-19.782 5.07-25.855a67.2 67.2 0 0 1 14.32-23.618c4.39-4.704 9.79-8.622 20.58-16.458z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='ghost-ish']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304'%3E%3Cpath d='M0 144.762C0 64.812 68.053 0 152 0s152 64.812 152 144.762v101.333c0 31.98-27.221 57.905-60.8 57.905-9.953 0-19.347-2.278-27.64-6.315-4.225-2.058-8.441-4.313-12.675-6.578-14.899-7.971-30.019-16.059-46.558-16.059h-8.654c-16.539 0-31.659 8.088-46.558 16.059-4.234 2.265-8.45 4.52-12.675 6.578C80.147 301.722 70.753 304 60.8 304 27.221 304 0 278.075 0 246.095z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304'%3E%3Cpath d='M0 144.762C0 64.812 68.053 0 152 0s152 64.812 152 144.762v101.333c0 31.98-27.221 57.905-60.8 57.905-9.953 0-19.347-2.278-27.64-6.315-4.225-2.058-8.441-4.313-12.675-6.578-14.899-7.971-30.019-16.059-46.558-16.059h-8.654c-16.539 0-31.659 8.088-46.558 16.059-4.234 2.265-8.45 4.52-12.675 6.578C80.147 301.722 70.753 304 60.8 304 27.221 304 0 278.075 0 246.095z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='heart']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 286'%3E%3Cpath d='M251.1.13c-21.661 0-40.987 10.17-53.619 26.07L160 67.51v-.13l-37.481-41.32C109.887 10.17 90.561 0 68.9 0 30.848 0 0 31.37 0 70.06c0 34 28.375 59.41 48.919 83.82 20.47 24.33 40.937 48.64 61.404 72.96l45.949 54.6c1.244 1.47 2.484 2.95 3.728 4.43v.13c1.244-1.48 2.484-2.95 3.728-4.43 15.315-18.2 30.63-36.39 45.949-54.59l61.404-72.96C291.625 129.61 320 104.2 320 70.19 320 31.5 289.152.13 251.1.13' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 286'%3E%3Cpath d='M251.1.13c-21.661 0-40.987 10.17-53.619 26.07L160 67.51v-.13l-37.481-41.32C109.887 10.17 90.561 0 68.9 0 30.848 0 0 31.37 0 70.06c0 34 28.375 59.41 48.919 83.82 20.47 24.33 40.937 48.64 61.404 72.96l45.949 54.6c1.244 1.47 2.484 2.95 3.728 4.43v.13c1.244-1.48 2.484-2.95 3.728-4.43 15.315-18.2 30.63-36.39 45.949-54.59l61.404-72.96C291.625 129.61 320 104.2 320 70.19 320 31.5 289.152.13 251.1.13' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='leaf-clover4']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 296'%3E%3Cpath d='M21 148C7.9 132.34 0 112.13 0 90.06 0 40.32 40.11 0 89.6 0c22.39 0 42.87 8.26 58.57 21.91C163.84 8.26 184.27 0 206.61 0 255.98 0 296 40.32 296 90.06c0 22.07-7.88 42.28-20.95 57.94 13.07 15.66 20.95 35.87 20.95 57.94 0 49.74-40.02 90.06-89.39 90.06-22.34 0-42.77-8.26-58.44-21.91C132.47 287.74 111.99 296 89.6 296 40.11 296 0 255.68 0 205.94c0-22.07 7.9-42.28 21-57.94' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 296'%3E%3Cpath d='M21 148C7.9 132.34 0 112.13 0 90.06 0 40.32 40.11 0 89.6 0c22.39 0 42.87 8.26 58.57 21.91C163.84 8.26 184.27 0 206.61 0 255.98 0 296 40.32 296 90.06c0 22.07-7.88 42.28-20.95 57.94 13.07 15.66 20.95 35.87 20.95 57.94 0 49.74-40.02 90.06-89.39 90.06-22.34 0-42.77-8.26-58.44-21.91C132.47 287.74 111.99 296 89.6 296 40.11 296 0 255.68 0 205.94c0-22.07 7.9-42.28 21-57.94' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='leaf-clover8']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M308.58 160c25.85 48.16 6.32 91.77-43.51 105.06-13.3 49.84-56.91 69.36-105.07 43.52-48.17 25.85-91.78 6.32-105.07-43.51C5.1 251.77-14.43 208.16 11.42 160-14.43 111.83 5.1 68.22 54.93 54.93 68.22 5.1 111.83-14.43 160 11.42c48.16-25.85 91.77-6.32 105.06 43.51 49.84 13.29 69.36 56.9 43.52 105.07' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M308.58 160c25.85 48.16 6.32 91.77-43.51 105.06-13.3 49.84-56.91 69.36-105.07 43.52-48.17 25.85-91.78 6.32-105.07-43.51C5.1 251.77-14.43 208.16 11.42 160-14.43 111.83 5.1 68.22 54.93 54.93 68.22 5.1 111.83-14.43 160 11.42c48.16-25.85 91.77-6.32 105.06 43.51 49.84 13.29 69.36 56.9 43.52 105.07' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='oval']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M231.309 231.31c-69.604 69.6-162.432 89.63-207.338 44.72S-.913 138.29 68.69 68.69s162.432-89.63 207.338-44.72 24.884 137.74-44.72 207.34' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M231.309 231.31c-69.604 69.6-162.432 89.63-207.338 44.72S-.913 138.29 68.69 68.69s162.432-89.63 207.338-44.72 24.884 137.74-44.72 207.34' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='pentagon']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M109.63 24.37c15.61-12.08 23.41-18.12 31.75-21.12a55 55 0 0 1 37.24 0c8.34 3 16.14 9.04 31.75 21.12l34.14 26.43 34.12 24.76c16.19 11.75 24.29 17.63 29.7 25.01 7.82 10.69 11.94 23.82 11.66 37.25-.2 9.29-3.41 19-9.85 38.41l-13.4 40.43-12.36 41.42c-5.81 19.44-8.71 29.16-13.78 36.72-7.34 10.94-18.01 18.98-30.28 22.83-8.48 2.67-18.26 2.51-37.82 2.2l-42.5-.67-42.5.67c-19.56.31-29.34.47-37.82-2.2-12.27-3.85-22.94-11.89-30.28-22.83-5.07-7.56-7.97-17.28-13.78-36.72l-12.36-41.42-13.4-40.43C3.42 156.82.21 147.11.01 137.82c-.28-13.43 3.84-26.56 11.66-37.25 5.41-7.38 13.51-13.26 29.7-25.01L75.49 50.8z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M109.63 24.37c15.61-12.08 23.41-18.12 31.75-21.12a55 55 0 0 1 37.24 0c8.34 3 16.14 9.04 31.75 21.12l34.14 26.43 34.12 24.76c16.19 11.75 24.29 17.63 29.7 25.01 7.82 10.69 11.94 23.82 11.66 37.25-.2 9.29-3.41 19-9.85 38.41l-13.4 40.43-12.36 41.42c-5.81 19.44-8.71 29.16-13.78 36.72-7.34 10.94-18.01 18.98-30.28 22.83-8.48 2.67-18.26 2.51-37.82 2.2l-42.5-.67-42.5.67c-19.56.31-29.34.47-37.82-2.2-12.27-3.85-22.94-11.89-30.28-22.83-5.07-7.56-7.97-17.28-13.78-36.72l-12.36-41.42-13.4-40.43C3.42 156.82.21 147.11.01 137.82c-.28-13.43 3.84-26.56 11.66-37.25 5.41-7.38 13.51-13.26 29.7-25.01L75.49 50.8z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='pill']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M79.86 37.77c50.36-50.36 132.01-50.36 182.37 0s50.36 132.01 0 182.37l-42.09 42.09c-50.36 50.36-132.01 50.36-182.37 0s-50.36-132.01 0-182.37z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M79.86 37.77c50.36-50.36 132.01-50.36 182.37 0s50.36 132.01 0 182.37l-42.09 42.09c-50.36 50.36-132.01 50.36-182.37 0s-50.36-132.01 0-182.37z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='pixel-circle']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M225.19 0H94.81v20.74H50.37v26.67H23.704v47.4H0v130.38h23.704v47.4H50.37v26.67h44.44V320h130.38v-20.74h44.44v-26.67h26.67v-47.4H320V94.81h-23.7v-47.4h-26.67V20.74h-44.44z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M225.19 0H94.81v20.74H50.37v26.67H23.704v47.4H0v130.38h23.704v47.4H50.37v26.67h44.44V320h130.38v-20.74h44.44v-26.67h26.67v-47.4H320V94.81h-23.7v-47.4h-26.67V20.74h-44.44z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='pixel-triangle']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 320'%3E%3Cpath d='M55.64 0H0v320h55.64v-27.826h42.92v-26.435h44.52V235.13h36.56v-25.044h36.57v-30.608H248v-38.956h-31.79v-30.61h-36.57V84.869h-36.56V54.261H98.56V27.826H55.64z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 320'%3E%3Cpath d='M55.64 0H0v320h55.64v-27.826h42.92v-26.435h44.52V235.13h36.56v-25.044h36.57v-30.608H248v-38.956h-31.79v-30.61h-36.57V84.869h-36.56V54.261H98.56V27.826H55.64z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='puffy-diamond']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M249.4 249.754c12.08-12.088 16.17-29.146 12.26-44.597 15.46 3.929 32.54-.156 44.64-12.255 18.27-18.266 18.27-47.882 0-66.148-12.03-12.027-28.98-16.135-44.36-12.324 3.43-15.144-.75-31.664-12.54-43.455-12.12-12.115-29.23-16.195-44.7-12.239 4.1-15.565.05-32.833-12.16-45.036-18.26-18.267-47.88-18.267-66.14 0-12.13 12.13-16.21 29.265-12.23 44.758-15.17-3.472-31.74.7-43.55 12.517-11.79 11.792-15.97 28.314-12.54 43.459-15.39-3.818-32.35.289-44.38 12.32-18.27 18.266-18.27 47.882 0 66.148 12.1 12.103 29.19 16.187 44.65 12.251-3.91 15.452.18 32.512 12.27 44.601 11.76 11.767 28.24 15.954 43.36 12.56-3.65 15.288.49 32.057 12.42 43.986 18.26 18.267 47.88 18.267 66.14 0 12-11.999 16.12-28.897 12.35-44.257 15.43 3.871 32.44-.226 44.51-12.289' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M249.4 249.754c12.08-12.088 16.17-29.146 12.26-44.597 15.46 3.929 32.54-.156 44.64-12.255 18.27-18.266 18.27-47.882 0-66.148-12.03-12.027-28.98-16.135-44.36-12.324 3.43-15.144-.75-31.664-12.54-43.455-12.12-12.115-29.23-16.195-44.7-12.239 4.1-15.565.05-32.833-12.16-45.036-18.26-18.267-47.88-18.267-66.14 0-12.13 12.13-16.21 29.265-12.23 44.758-15.17-3.472-31.74.7-43.55 12.517-11.79 11.792-15.97 28.314-12.54 43.459-15.39-3.818-32.35.289-44.38 12.32-18.27 18.266-18.27 47.882 0 66.148 12.1 12.103 29.19 16.187 44.65 12.251-3.91 15.452.18 32.512 12.27 44.601 11.76 11.767 28.24 15.954 43.36 12.56-3.65 15.288.49 32.057 12.42 43.986 18.26 18.267 47.88 18.267 66.14 0 12-11.999 16.12-28.897 12.35-44.257 15.43 3.871 32.44-.226 44.51-12.289' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='puffy']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 280'%3E%3Cpath d='M319.98 138.106c-.26-21.532-16.25-38.773-35.74-38.485-1.07 0-2.13.09-3.18.217.82-.74 1.62-1.497 2.38-2.327 13.96-15.022 14.25-39.729.67-55.167-.8-.901-1.59-1.803-2.41-2.669-13.96-15.022-36.28-14.698-49.88.74-.75.847-1.43 1.731-2.1 2.633.11-1.154.18-2.327.2-3.517C230.19 17.998 214.61.307 195.14 0h-2.87C177.84 0 165.46 9.594 160 23.318 154.54 9.594 142.15 0 127.73 0h-2.87c-19.47.289-35.05 17.98-34.79 39.531 0 1.19.08 2.363.19 3.517a36 36 0 0 0-2.1-2.633c-13.58-15.438-35.92-15.762-49.88-.74-.81.884-1.63 1.768-2.41 2.669-13.58 15.438-13.29 40.127.67 55.167.77.83 1.56 1.587 2.38 2.327a30 30 0 0 0-3.18-.217C16.27 99.333.28 116.574 0 138.106v3.788c.26 21.533 16.26 38.773 35.74 38.485 1.08 0 2.14-.09 3.18-.217-.82.74-1.61 1.497-2.38 2.327-13.96 15.022-14.25 39.729-.67 55.167.8.901 1.6 1.803 2.41 2.669 13.96 15.022 36.28 14.698 49.88-.74.75-.847 1.44-1.731 2.1-2.633a41 41 0 0 0-.19 3.517c-.26 21.533 15.31 39.242 34.79 39.531h2.87c14.43 0 26.81-9.594 32.27-23.318C165.46 270.406 177.85 280 192.27 280h2.87c19.47-.289 35.05-17.98 34.79-39.531 0-1.19-.08-2.363-.19-3.517.66.902 1.35 1.786 2.1 2.633 13.58 15.438 35.92 15.762 49.88.74.81-.884 1.63-1.768 2.41-2.669 13.58-15.438 13.29-40.127-.67-55.167-.77-.83-1.56-1.587-2.38-2.327a30 30 0 0 0 3.18.217c19.47.288 35.48-16.934 35.74-38.485v-3.788z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 280'%3E%3Cpath d='M319.98 138.106c-.26-21.532-16.25-38.773-35.74-38.485-1.07 0-2.13.09-3.18.217.82-.74 1.62-1.497 2.38-2.327 13.96-15.022 14.25-39.729.67-55.167-.8-.901-1.59-1.803-2.41-2.669-13.96-15.022-36.28-14.698-49.88.74-.75.847-1.43 1.731-2.1 2.633.11-1.154.18-2.327.2-3.517C230.19 17.998 214.61.307 195.14 0h-2.87C177.84 0 165.46 9.594 160 23.318 154.54 9.594 142.15 0 127.73 0h-2.87c-19.47.289-35.05 17.98-34.79 39.531 0 1.19.08 2.363.19 3.517a36 36 0 0 0-2.1-2.633c-13.58-15.438-35.92-15.762-49.88-.74-.81.884-1.63 1.768-2.41 2.669-13.58 15.438-13.29 40.127.67 55.167.77.83 1.56 1.587 2.38 2.327a30 30 0 0 0-3.18-.217C16.27 99.333.28 116.574 0 138.106v3.788c.26 21.533 16.26 38.773 35.74 38.485 1.08 0 2.14-.09 3.18-.217-.82.74-1.61 1.497-2.38 2.327-13.96 15.022-14.25 39.729-.67 55.167.8.901 1.6 1.803 2.41 2.669 13.96 15.022 36.28 14.698 49.88-.74.75-.847 1.44-1.731 2.1-2.633a41 41 0 0 0-.19 3.517c-.26 21.533 15.31 39.242 34.79 39.531h2.87c14.43 0 26.81-9.594 32.27-23.318C165.46 270.406 177.85 280 192.27 280h2.87c19.47-.289 35.05-17.98 34.79-39.531 0-1.19-.08-2.363-.19-3.517.66.902 1.35 1.786 2.1 2.633 13.58 15.438 35.92 15.762 49.88.74.81-.884 1.63-1.768 2.41-2.669 13.58-15.438 13.29-40.127-.67-55.167-.77-.83-1.56-1.587-2.38-2.327a30 30 0 0 0 3.18.217c19.47.288 35.48-16.934 35.74-38.485v-3.788z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='semicircle']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cpath d='M320 166.92c0 18.27-14.81 33.08-33.079 33.08H33.079C14.81 200 0 185.19 0 166.92V160C0 71.63 71.634 0 160 0s160 71.63 160 160z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cpath d='M320 166.92c0 18.27-14.81 33.08-33.079 33.08H33.079C14.81 200 0 185.19 0 166.92V160C0 71.63 71.634 0 160 0s160 71.63 160 160z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sided-cookie12']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M136.7 9.85c.54-.53.81-.8 1.04-1.02 12.51-11.77 32.01-11.77 44.52 0 .23.22.5.49 1.04 1.02.33.31.49.47.64.62a32.48 32.48 0 0 0 30.09 8.06c.21-.05.43-.11.87-.22.73-.19 1.1-.28 1.41-.36 16.71-3.94 33.61 5.81 38.55 22.26.09.31.19.67.4 1.4.12.44.18.66.24.87a32.47 32.47 0 0 0 22.02 22.02c.21.06.43.12.87.24.73.21 1.09.31 1.4.4 16.45 4.94 26.2 21.84 22.26 38.55-.08.31-.17.68-.36 1.41-.11.44-.17.66-.22.87a32.48 32.48 0 0 0 8.06 30.09c.15.15.31.31.62.64.53.54.8.81 1.02 1.04 11.77 12.51 11.77 32.01 0 44.52-.22.23-.49.5-1.02 1.04-.31.33-.47.49-.62.64a32.48 32.48 0 0 0-8.06 30.09c.05.21.11.43.22.87.19.73.28 1.1.36 1.41 3.94 16.71-5.81 33.61-22.26 38.55-.31.09-.67.19-1.4.4-.44.12-.66.18-.87.24a32.47 32.47 0 0 0-22.02 22.02c-.06.21-.12.43-.24.87-.21.73-.31 1.09-.4 1.4-4.94 16.45-21.84 26.2-38.55 22.26-.31-.08-.68-.17-1.41-.36-.44-.11-.66-.17-.87-.22a32.48 32.48 0 0 0-30.09 8.06c-.15.15-.31.31-.64.62-.54.53-.81.8-1.04 1.02-12.51 11.77-32.01 11.77-44.52 0-.23-.22-.5-.49-1.04-1.02-.33-.31-.49-.47-.64-.62a32.48 32.48 0 0 0-30.09-8.06c-.21.05-.43.11-.87.22-.73.19-1.1.28-1.41.36-16.71 3.94-33.61-5.81-38.55-22.26-.09-.31-.19-.67-.4-1.4-.12-.44-.18-.66-.24-.87a32.47 32.47 0 0 0-22.02-22.02c-.21-.06-.43-.12-.87-.24-.73-.21-1.09-.31-1.4-.4-16.45-4.94-26.2-21.84-22.26-38.55.08-.31.17-.68.36-1.41.11-.44.17-.66.22-.87a32.48 32.48 0 0 0-8.06-30.09c-.15-.15-.31-.31-.62-.64-.53-.54-.8-.81-1.02-1.04-11.77-12.51-11.77-32.01 0-44.52.22-.23.49-.5 1.02-1.04.31-.33.47-.49.62-.64a32.48 32.48 0 0 0 8.06-30.09c-.05-.21-.11-.43-.22-.87-.19-.73-.28-1.1-.36-1.41-3.94-16.71 5.81-33.61 22.26-38.55.31-.09.67-.19 1.4-.4.44-.12.66-.18.87-.24A32.47 32.47 0 0 0 64.5 42.48c.06-.21.12-.43.24-.87.21-.73.31-1.09.4-1.4 4.94-16.45 21.84-26.2 38.55-22.26.31.08.68.17 1.41.36.44.11.66.17.87.22a32.48 32.48 0 0 0 30.09-8.06c.15-.15.31-.31.64-.62' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M136.7 9.85c.54-.53.81-.8 1.04-1.02 12.51-11.77 32.01-11.77 44.52 0 .23.22.5.49 1.04 1.02.33.31.49.47.64.62a32.48 32.48 0 0 0 30.09 8.06c.21-.05.43-.11.87-.22.73-.19 1.1-.28 1.41-.36 16.71-3.94 33.61 5.81 38.55 22.26.09.31.19.67.4 1.4.12.44.18.66.24.87a32.47 32.47 0 0 0 22.02 22.02c.21.06.43.12.87.24.73.21 1.09.31 1.4.4 16.45 4.94 26.2 21.84 22.26 38.55-.08.31-.17.68-.36 1.41-.11.44-.17.66-.22.87a32.48 32.48 0 0 0 8.06 30.09c.15.15.31.31.62.64.53.54.8.81 1.02 1.04 11.77 12.51 11.77 32.01 0 44.52-.22.23-.49.5-1.02 1.04-.31.33-.47.49-.62.64a32.48 32.48 0 0 0-8.06 30.09c.05.21.11.43.22.87.19.73.28 1.1.36 1.41 3.94 16.71-5.81 33.61-22.26 38.55-.31.09-.67.19-1.4.4-.44.12-.66.18-.87.24a32.47 32.47 0 0 0-22.02 22.02c-.06.21-.12.43-.24.87-.21.73-.31 1.09-.4 1.4-4.94 16.45-21.84 26.2-38.55 22.26-.31-.08-.68-.17-1.41-.36-.44-.11-.66-.17-.87-.22a32.48 32.48 0 0 0-30.09 8.06c-.15.15-.31.31-.64.62-.54.53-.81.8-1.04 1.02-12.51 11.77-32.01 11.77-44.52 0-.23-.22-.5-.49-1.04-1.02-.33-.31-.49-.47-.64-.62a32.48 32.48 0 0 0-30.09-8.06c-.21.05-.43.11-.87.22-.73.19-1.1.28-1.41.36-16.71 3.94-33.61-5.81-38.55-22.26-.09-.31-.19-.67-.4-1.4-.12-.44-.18-.66-.24-.87a32.47 32.47 0 0 0-22.02-22.02c-.21-.06-.43-.12-.87-.24-.73-.21-1.09-.31-1.4-.4-16.45-4.94-26.2-21.84-22.26-38.55.08-.31.17-.68.36-1.41.11-.44.17-.66.22-.87a32.48 32.48 0 0 0-8.06-30.09c-.15-.15-.31-.31-.62-.64-.53-.54-.8-.81-1.02-1.04-11.77-12.51-11.77-32.01 0-44.52.22-.23.49-.5 1.02-1.04.31-.33.47-.49.62-.64a32.48 32.48 0 0 0 8.06-30.09c-.05-.21-.11-.43-.22-.87-.19-.73-.28-1.1-.36-1.41-3.94-16.71 5.81-33.61 22.26-38.55.31-.09.67-.19 1.4-.4.44-.12.66-.18.87-.24A32.47 32.47 0 0 0 64.5 42.48c.06-.21.12-.43.24-.87.21-.73.31-1.09.4-1.4 4.94-16.45 21.84-26.2 38.55-22.26.31.08.68.17 1.41.36.44.11.66.17.87.22a32.48 32.48 0 0 0 30.09-8.06c.15-.15.31-.31.64-.62' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sided-cookie4']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath d='M178.73 6.21c60.14-26.12 121.18 34.92 95.06 95.06l-4.32 9.94a72.32 72.32 0 0 0 0 57.58l4.32 9.94c26.12 60.14-34.92 121.18-95.06 95.06l-9.94-4.32a72.32 72.32 0 0 0-57.58 0l-9.94 4.32c-60.142 26.12-121.184-34.92-95.063-95.06l4.319-9.94a72.28 72.28 0 0 0 0-57.58l-4.32-9.94C-19.913 41.13 41.129-19.91 101.27 6.21l9.94 4.32a72.32 72.32 0 0 0 57.58 0z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 280'%3E%3Cpath d='M178.73 6.21c60.14-26.12 121.18 34.92 95.06 95.06l-4.32 9.94a72.32 72.32 0 0 0 0 57.58l4.32 9.94c26.12 60.14-34.92 121.18-95.06 95.06l-9.94-4.32a72.32 72.32 0 0 0-57.58 0l-9.94 4.32c-60.142 26.12-121.184-34.92-95.063-95.06l4.319-9.94a72.28 72.28 0 0 0 0-57.58l-4.32-9.94C-19.913 41.13 41.129-19.91 101.27 6.21l9.94 4.32a72.32 72.32 0 0 0 57.58 0z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sided-cookie6']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 316'%3E%3Cpath d='M92.186 22.57c31.09-30.09 80.538-30.09 111.628 0a80.24 80.24 0 0 0 33.924 19.52c41.681 11.8 66.404 54.5 55.814 96.38a79.7 79.7 0 0 0 0 39.06c10.59 41.88-14.133 84.58-55.814 96.38a80.24 80.24 0 0 0-33.924 19.52c-31.09 30.09-80.538 30.09-111.628 0a80.24 80.24 0 0 0-33.924-19.52c-41.681-11.8-66.404-54.5-55.814-96.38a79.7 79.7 0 0 0 0-39.06C-8.142 96.59 16.58 53.89 58.262 42.09a80.24 80.24 0 0 0 33.924-19.52' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 296 316'%3E%3Cpath d='M92.186 22.57c31.09-30.09 80.538-30.09 111.628 0a80.24 80.24 0 0 0 33.924 19.52c41.681 11.8 66.404 54.5 55.814 96.38a79.7 79.7 0 0 0 0 39.06c10.59 41.88-14.133 84.58-55.814 96.38a80.24 80.24 0 0 0-33.924 19.52c-31.09 30.09-80.538 30.09-111.628 0a80.24 80.24 0 0 0-33.924-19.52c-41.681-11.8-66.404-54.5-55.814-96.38a79.7 79.7 0 0 0 0-39.06C-8.142 96.59 16.58 53.89 58.262 42.09a80.24 80.24 0 0 0 33.924-19.52' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sided-cookie7']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 316'%3E%3Cpath d='M112.67 19.78c3.573-3.14 5.359-4.71 7.001-5.98 23.754-18.4 56.904-18.4 80.658 0 1.642 1.27 3.428 2.84 7.001 5.98 1.196 1.06 1.794 1.58 2.394 2.09a66 66 0 0 0 29.196 14.09c.768.16 1.551.3 3.118.58 4.681.84 7.021 1.25 9.037 1.75 29.159 7.14 49.827 33.12 50.289 63.2.032 2.08-.081 4.46-.307 9.22-.075 1.6-.113 2.39-.132 3.18a66.24 66.24 0 0 0 7.211 31.66c.357.7.736 1.4 1.494 2.81 2.264 4.19 3.396 6.28 4.267 8.17 12.606 27.3 5.23 59.7-17.948 78.81-1.602 1.33-3.529 2.72-7.383 5.51-1.29.94-1.936 1.4-2.559 1.88a66.1 66.1 0 0 0-20.204 25.39c-.323.72-.634 1.45-1.256 2.92-1.857 4.39-2.786 6.58-3.715 8.44-13.439 26.9-43.306 41.32-72.67 35.08-2.03-.44-4.32-1.08-8.9-2.36-1.534-.42-2.3-.64-3.059-.83a65.84 65.84 0 0 0-32.406 0c-.759.19-1.525.41-3.059.83-4.58 1.28-6.87 1.92-8.9 2.36-29.364 6.24-59.23-8.18-72.67-35.08-.93-1.86-1.858-4.05-3.715-8.44-.622-1.47-.933-2.2-1.256-2.92a66.14 66.14 0 0 0-20.204-25.39c-.623-.48-1.269-.94-2.559-1.88-3.854-2.79-5.78-4.18-7.383-5.51C.873 216.23-6.503 183.83 6.103 156.53c.871-1.89 2.003-3.98 4.267-8.17.758-1.41 1.137-2.11 1.494-2.81a66.2 66.2 0 0 0 7.21-31.66c-.018-.79-.056-1.58-.131-3.18-.226-4.76-.34-7.14-.307-9.22.462-30.08 21.13-56.06 50.29-63.2 2.015-.5 4.355-.91 9.036-1.75 1.567-.28 2.35-.42 3.117-.58a66 66 0 0 0 29.197-14.09c.6-.51 1.198-1.03 2.394-2.09' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 316'%3E%3Cpath d='M112.67 19.78c3.573-3.14 5.359-4.71 7.001-5.98 23.754-18.4 56.904-18.4 80.658 0 1.642 1.27 3.428 2.84 7.001 5.98 1.196 1.06 1.794 1.58 2.394 2.09a66 66 0 0 0 29.196 14.09c.768.16 1.551.3 3.118.58 4.681.84 7.021 1.25 9.037 1.75 29.159 7.14 49.827 33.12 50.289 63.2.032 2.08-.081 4.46-.307 9.22-.075 1.6-.113 2.39-.132 3.18a66.24 66.24 0 0 0 7.211 31.66c.357.7.736 1.4 1.494 2.81 2.264 4.19 3.396 6.28 4.267 8.17 12.606 27.3 5.23 59.7-17.948 78.81-1.602 1.33-3.529 2.72-7.383 5.51-1.29.94-1.936 1.4-2.559 1.88a66.1 66.1 0 0 0-20.204 25.39c-.323.72-.634 1.45-1.256 2.92-1.857 4.39-2.786 6.58-3.715 8.44-13.439 26.9-43.306 41.32-72.67 35.08-2.03-.44-4.32-1.08-8.9-2.36-1.534-.42-2.3-.64-3.059-.83a65.84 65.84 0 0 0-32.406 0c-.759.19-1.525.41-3.059.83-4.58 1.28-6.87 1.92-8.9 2.36-29.364 6.24-59.23-8.18-72.67-35.08-.93-1.86-1.858-4.05-3.715-8.44-.622-1.47-.933-2.2-1.256-2.92a66.14 66.14 0 0 0-20.204-25.39c-.623-.48-1.269-.94-2.559-1.88-3.854-2.79-5.78-4.18-7.383-5.51C.873 216.23-6.503 183.83 6.103 156.53c.871-1.89 2.003-3.98 4.267-8.17.758-1.41 1.137-2.11 1.494-2.81a66.2 66.2 0 0 0 7.21-31.66c-.018-.79-.056-1.58-.131-3.18-.226-4.76-.34-7.14-.307-9.22.462-30.08 21.13-56.06 50.29-63.2 2.015-.5 4.355-.91 9.036-1.75 1.567-.28 2.35-.42 3.117-.58a66 66 0 0 0 29.197-14.09c.6-.51 1.198-1.03 2.394-2.09' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sided-cookie9']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M125.26 13.38c1.73-1.43 2.59-2.14 3.38-2.74a51.525 51.525 0 0 1 62.72 0c.79.6 1.65 1.31 3.38 2.74.77.63 1.15.95 1.53 1.26a51.7 51.7 0 0 0 30.55 11.23c.48.01.98.02 1.97.03 2.23.03 3.35.04 4.33.09 23.24 1.19 42.86 17.83 48.05 40.74.22.97.43 2.08.85 4.29.18.99.27 1.48.37 1.96 2.27 11 7.97 20.96 16.25 28.44.37.33.74.66 1.5 1.31 1.69 1.47 2.53 2.21 3.25 2.89 17.05 15.99 21.5 41.49 10.9 62.41-.45.89-1 1.87-2.09 3.83-.49.88-.73 1.32-.96 1.75a53 53 0 0 0-5.64 32.34c.07.49.15.98.31 1.97.36 2.23.54 3.34.66 4.33 2.88 23.32-9.93 45.74-31.36 54.88-.91.39-1.96.79-4.04 1.59-.93.35-1.4.53-1.85.71-10.32 4.17-19.04 11.57-24.9 21.11-.25.42-.5.85-1.01 1.71-1.14 1.94-1.71 2.91-2.25 3.75-12.63 19.73-36.7 28.59-58.94 21.67-.94-.29-2-.66-4.1-1.41-.94-.33-1.41-.5-1.87-.65a51.47 51.47 0 0 0-32.5 0c-.46.15-.93.32-1.87.65-2.1.75-3.16 1.12-4.1 1.41-22.24 6.92-46.31-1.94-58.94-21.67-.54-.84-1.11-1.81-2.25-3.75-.51-.86-.76-1.29-1.01-1.71C69.72 281 61 273.6 50.68 269.43c-.45-.18-.92-.36-1.85-.71-2.08-.8-3.13-1.2-4.04-1.59-21.43-9.14-34.24-31.56-31.36-54.88.12-.99.3-2.1.66-4.33.16-.99.24-1.48.31-1.97a53 53 0 0 0-5.64-32.34c-.23-.43-.47-.87-.96-1.75-1.09-1.96-1.64-2.94-2.09-3.83-10.6-20.92-6.15-46.42 10.9-62.41.72-.68 1.56-1.42 3.25-2.89.76-.65 1.13-.98 1.5-1.31a52.66 52.66 0 0 0 16.25-28.44c.1-.48.19-.97.37-1.96.42-2.21.63-3.32.85-4.29 5.19-22.91 24.81-39.55 48.05-40.74.98-.05 2.1-.06 4.33-.09.99-.01 1.49-.02 1.97-.03a51.7 51.7 0 0 0 30.55-11.23c.38-.31.76-.63 1.53-1.26' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M125.26 13.38c1.73-1.43 2.59-2.14 3.38-2.74a51.525 51.525 0 0 1 62.72 0c.79.6 1.65 1.31 3.38 2.74.77.63 1.15.95 1.53 1.26a51.7 51.7 0 0 0 30.55 11.23c.48.01.98.02 1.97.03 2.23.03 3.35.04 4.33.09 23.24 1.19 42.86 17.83 48.05 40.74.22.97.43 2.08.85 4.29.18.99.27 1.48.37 1.96 2.27 11 7.97 20.96 16.25 28.44.37.33.74.66 1.5 1.31 1.69 1.47 2.53 2.21 3.25 2.89 17.05 15.99 21.5 41.49 10.9 62.41-.45.89-1 1.87-2.09 3.83-.49.88-.73 1.32-.96 1.75a53 53 0 0 0-5.64 32.34c.07.49.15.98.31 1.97.36 2.23.54 3.34.66 4.33 2.88 23.32-9.93 45.74-31.36 54.88-.91.39-1.96.79-4.04 1.59-.93.35-1.4.53-1.85.71-10.32 4.17-19.04 11.57-24.9 21.11-.25.42-.5.85-1.01 1.71-1.14 1.94-1.71 2.91-2.25 3.75-12.63 19.73-36.7 28.59-58.94 21.67-.94-.29-2-.66-4.1-1.41-.94-.33-1.41-.5-1.87-.65a51.47 51.47 0 0 0-32.5 0c-.46.15-.93.32-1.87.65-2.1.75-3.16 1.12-4.1 1.41-22.24 6.92-46.31-1.94-58.94-21.67-.54-.84-1.11-1.81-2.25-3.75-.51-.86-.76-1.29-1.01-1.71C69.72 281 61 273.6 50.68 269.43c-.45-.18-.92-.36-1.85-.71-2.08-.8-3.13-1.2-4.04-1.59-21.43-9.14-34.24-31.56-31.36-54.88.12-.99.3-2.1.66-4.33.16-.99.24-1.48.31-1.97a53 53 0 0 0-5.64-32.34c-.23-.43-.47-.87-.96-1.75-1.09-1.96-1.64-2.94-2.09-3.83-10.6-20.92-6.15-46.42 10.9-62.41.72-.68 1.56-1.42 3.25-2.89.76-.65 1.13-.98 1.5-1.31a52.66 52.66 0 0 0 16.25-28.44c.1-.48.19-.97.37-1.96.42-2.21.63-3.32.85-4.29 5.19-22.91 24.81-39.55 48.05-40.74.98-.05 2.1-.06 4.33-.09.99-.01 1.49-.02 1.97-.03a51.7 51.7 0 0 0 30.55-11.23c.38-.31.76-.63 1.53-1.26' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='slanted']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 300'%3E%3Cpath d='M15.715 80.54c2.574-24.58 3.861-36.87 8.588-46.562C31.142 19.945 43.077 9.11 57.628 3.723 67.683 0 79.933 0 104.432 0h123.705c29.627 0 44.441 0 55.75 4.854 16.374 7.028 28.833 20.995 34.04 38.166 3.596 11.85 2.04 26.71-1.073 56.44l-12.569 120c-2.574 24.58-3.861 36.87-8.588 46.56-6.839 14.03-18.774 24.87-33.325 30.26-10.055 3.72-22.305 3.72-46.804 3.72H91.863c-29.627 0-44.441 0-55.75-4.85-16.374-7.03-28.833-21-34.04-38.17-3.597-11.85-2.04-26.71 1.073-56.44z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 300'%3E%3Cpath d='M15.715 80.54c2.574-24.58 3.861-36.87 8.588-46.562C31.142 19.945 43.077 9.11 57.628 3.723 67.683 0 79.933 0 104.432 0h123.705c29.627 0 44.441 0 55.75 4.854 16.374 7.028 28.833 20.995 34.04 38.166 3.596 11.85 2.04 26.71-1.073 56.44l-12.569 120c-2.574 24.58-3.861 36.87-8.588 46.56-6.839 14.03-18.774 24.87-33.325 30.26-10.055 3.72-22.305 3.72-46.804 3.72H91.863c-29.627 0-44.441 0-55.75-4.85-16.374-7.03-28.833-21-34.04-38.17-3.597-11.85-2.04-26.71 1.073-56.44z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='soft-boom']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M174.94 84.95c22.54-113.265-52.39-113.265-29.86 0C122.55-28.315 53.327.352 117.49 96.38 53.327.352.352 53.33 96.38 117.49.352 53.33-28.315 122.55 84.95 145.07c-113.265-22.53-113.265 52.39 0 29.86-113.265 22.53-84.584 91.74 11.43 27.58-96.014 64.16-43.04 117.14 21.11 21.11-64.163 96.01 5.06 124.68 27.58 11.43-22.53 113.27 52.39 113.27 29.86 0 22.53 113.27 91.74 84.58 27.58-11.43 64.16 96.01 117.14 43.04 21.11-21.11 96.01 64.16 124.68-5.06 11.43-27.58 113.27 22.53 113.27-52.39 0-29.86 113.27-22.53 84.58-91.74-11.43-27.58C319.63 53.33 266.66.352 202.51 96.38c64.16-96.014-5.06-124.682-27.58-11.43z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M174.94 84.95c22.54-113.265-52.39-113.265-29.86 0C122.55-28.315 53.327.352 117.49 96.38 53.327.352.352 53.33 96.38 117.49.352 53.33-28.315 122.55 84.95 145.07c-113.265-22.53-113.265 52.39 0 29.86-113.265 22.53-84.584 91.74 11.43 27.58-96.014 64.16-43.04 117.14 21.11 21.11-64.163 96.01 5.06 124.68 27.58 11.43-22.53 113.27 52.39 113.27 29.86 0 22.53 113.27 91.74 84.58 27.58-11.43 64.16 96.01 117.14 43.04 21.11-21.11 96.01 64.16 124.68-5.06 11.43-27.58 113.27 22.53 113.27-52.39 0-29.86 113.27-22.53 84.58-91.74-11.43-27.58C319.63 53.33 266.66.352 202.51 96.38c64.16-96.014-5.06-124.682-27.58-11.43z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='soft-burst']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M145.15 7.904c6.83-10.539 22.87-10.539 29.7 0l16.39 25.261c4.49 6.928 13.56 9.745 21.45 6.665l28.78-11.227c12.01-4.683 24.98 4.329 24.04 16.697l-2.27 29.65c-.63 8.13 4.97 15.5 13.25 17.45l30.19 7.09c12.59 2.96 17.55 17.54 9.18 27.02l-20.06 22.7c-5.5 6.23-5.5 15.35 0 21.58l20.06 22.7c8.37 9.48 3.41 24.06-9.18 27.02l-30.19 7.09c-8.28 1.95-13.88 9.32-13.25 17.45l2.27 29.65c.94 12.37-12.03 21.38-24.04 16.7l-28.78-11.23c-7.89-3.08-16.96-.26-21.45 6.67l-16.39 25.26c-6.83 10.53-22.87 10.53-29.7 0l-16.39-25.26c-4.49-6.93-13.56-9.75-21.45-6.67L78.53 291.4c-12.01 4.68-24.98-4.33-24.04-16.7l2.27-29.65c.63-8.13-4.97-15.5-13.25-17.45l-30.19-7.09c-12.59-2.96-17.55-17.54-9.18-27.02l20.06-22.7c5.5-6.23 5.5-15.35 0-21.58l-20.06-22.7c-8.37-9.48-3.41-24.06 9.18-27.02l30.19-7.09c8.28-1.95 13.88-9.32 13.25-17.45L54.49 45.3c-.94-12.368 12.03-21.38 24.04-16.697l28.78 11.227c7.89 3.08 16.96.263 21.45-6.665z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M145.15 7.904c6.83-10.539 22.87-10.539 29.7 0l16.39 25.261c4.49 6.928 13.56 9.745 21.45 6.665l28.78-11.227c12.01-4.683 24.98 4.329 24.04 16.697l-2.27 29.65c-.63 8.13 4.97 15.5 13.25 17.45l30.19 7.09c12.59 2.96 17.55 17.54 9.18 27.02l-20.06 22.7c-5.5 6.23-5.5 15.35 0 21.58l20.06 22.7c8.37 9.48 3.41 24.06-9.18 27.02l-30.19 7.09c-8.28 1.95-13.88 9.32-13.25 17.45l2.27 29.65c.94 12.37-12.03 21.38-24.04 16.7l-28.78-11.23c-7.89-3.08-16.96-.26-21.45 6.67l-16.39 25.26c-6.83 10.53-22.87 10.53-29.7 0l-16.39-25.26c-4.49-6.93-13.56-9.75-21.45-6.67L78.53 291.4c-12.01 4.68-24.98-4.33-24.04-16.7l2.27-29.65c.63-8.13-4.97-15.5-13.25-17.45l-30.19-7.09c-12.59-2.96-17.55-17.54-9.18-27.02l20.06-22.7c5.5-6.23 5.5-15.35 0-21.58l-20.06-22.7c-8.37-9.48-3.41-24.06 9.18-27.02l30.19-7.09c8.28-1.95 13.88-9.32 13.25-17.45L54.49 45.3c-.94-12.368 12.03-21.38 24.04-16.697l28.78 11.227c7.89 3.08 16.96.263 21.45-6.665z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='star']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M160 10l33.7 103.6h109l-88.2 64.1 33.7 103.7-88.2-64.1-88.2 64.1 33.7-103.7-88.2-64.1h109z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M160 10l33.7 103.6h109l-88.2 64.1 33.7 103.7-88.2-64.1-88.2 64.1 33.7-103.7-88.2-64.1h109z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='sunny']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cpath d='M261.856 41.24c10.575.72 15.862 1.08 20.135 2.94a26.86 26.86 0 0 1 13.825 13.83c1.869 4.27 2.228 9.56 2.946 20.13l1.64 24.13c.291 4.28.436 6.42.901 8.46a26.8 26.8 0 0 0 3.451 8.33c1.115 1.78 2.525 3.39 5.343 6.62l15.904 18.22c6.969 7.99 10.454 11.98 12.154 16.32a26.84 26.84 0 0 1 0 19.56c-1.7 4.34-5.185 8.33-12.154 16.32l-15.904 18.22c-2.818 3.23-4.228 4.84-5.343 6.62a26.8 26.8 0 0 0-3.451 8.33c-.465 2.04-.61 4.18-.901 8.46l-1.64 24.13c-.718 10.57-1.077 15.86-2.946 20.13a26.86 26.86 0 0 1-13.825 13.83c-4.273 1.86-9.56 2.22-20.135 2.94l-24.131 1.64c-4.277.29-6.415.44-8.458.9a26.8 26.8 0 0 0-8.33 3.45c-1.773 1.12-3.388 2.53-6.618 5.35L196.097 326c-7.986 6.97-11.978 10.45-16.322 12.15a26.72 26.72 0 0 1-19.55 0c-4.344-1.7-8.336-5.18-16.322-12.15l-18.222-15.9c-3.23-2.82-4.845-4.23-6.618-5.35a26.8 26.8 0 0 0-8.33-3.45c-2.043-.46-4.181-.61-8.458-.9l-24.131-1.64c-10.575-.72-15.862-1.08-20.135-2.94a26.86 26.86 0 0 1-13.825-13.83c-1.869-4.27-2.228-9.56-2.947-20.13l-1.64-24.13c-.29-4.28-.435-6.42-.9-8.46a26.8 26.8 0 0 0-3.45-8.33c-1.116-1.78-2.526-3.39-5.344-6.62L13.999 196.1c-6.969-7.99-10.454-11.98-12.154-16.32a26.84 26.84 0 0 1 0-19.56c1.7-4.34 5.185-8.33 12.154-16.32l15.904-18.22c2.818-3.23 4.228-4.84 5.343-6.62a26.8 26.8 0 0 0 3.45-8.33c.466-2.04.611-4.18.902-8.46l1.64-24.13c.718-10.57 1.077-15.86 2.946-20.13A26.86 26.86 0 0 1 58.01 44.18c4.273-1.86 9.56-2.22 20.135-2.94l24.131-1.64c4.277-.29 6.415-.44 8.458-.9a26.8 26.8 0 0 0 8.33-3.45c1.773-1.12 3.388-2.53 6.618-5.35L143.903 14c7.986-6.97 11.978-10.45 16.322-12.15a26.72 26.72 0 0 1 19.55 0c4.344 1.7 8.336 5.18 16.322 12.15l18.222 15.9c3.23 2.82 4.845 4.23 6.618 5.35a26.8 26.8 0 0 0 8.33 3.45c2.043.46 4.181.61 8.458.9z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cpath d='M261.856 41.24c10.575.72 15.862 1.08 20.135 2.94a26.86 26.86 0 0 1 13.825 13.83c1.869 4.27 2.228 9.56 2.946 20.13l1.64 24.13c.291 4.28.436 6.42.901 8.46a26.8 26.8 0 0 0 3.451 8.33c1.115 1.78 2.525 3.39 5.343 6.62l15.904 18.22c6.969 7.99 10.454 11.98 12.154 16.32a26.84 26.84 0 0 1 0 19.56c-1.7 4.34-5.185 8.33-12.154 16.32l-15.904 18.22c-2.818 3.23-4.228 4.84-5.343 6.62a26.8 26.8 0 0 0-3.451 8.33c-.465 2.04-.61 4.18-.901 8.46l-1.64 24.13c-.718 10.57-1.077 15.86-2.946 20.13a26.86 26.86 0 0 1-13.825 13.83c-4.273 1.86-9.56 2.22-20.135 2.94l-24.131 1.64c-4.277.29-6.415.44-8.458.9a26.8 26.8 0 0 0-8.33 3.45c-1.773 1.12-3.388 2.53-6.618 5.35L196.097 326c-7.986 6.97-11.978 10.45-16.322 12.15a26.72 26.72 0 0 1-19.55 0c-4.344-1.7-8.336-5.18-16.322-12.15l-18.222-15.9c-3.23-2.82-4.845-4.23-6.618-5.35a26.8 26.8 0 0 0-8.33-3.45c-2.043-.46-4.181-.61-8.458-.9l-24.131-1.64c-10.575-.72-15.862-1.08-20.135-2.94a26.86 26.86 0 0 1-13.825-13.83c-1.869-4.27-2.228-9.56-2.947-20.13l-1.64-24.13c-.29-4.28-.435-6.42-.9-8.46a26.8 26.8 0 0 0-3.45-8.33c-1.116-1.78-2.526-3.39-5.344-6.62L13.999 196.1c-6.969-7.99-10.454-11.98-12.154-16.32a26.84 26.84 0 0 1 0-19.56c1.7-4.34 5.185-8.33 12.154-16.32l15.904-18.22c2.818-3.23 4.228-4.84 5.343-6.62a26.8 26.8 0 0 0 3.45-8.33c.466-2.04.611-4.18.902-8.46l1.64-24.13c.718-10.57 1.077-15.86 2.946-20.13A26.86 26.86 0 0 1 58.01 44.18c4.273-1.86 9.56-2.22 20.135-2.94l24.131-1.64c4.277-.29 6.415-.44 8.458-.9a26.8 26.8 0 0 0 8.33-3.45c1.773-1.12 3.388-2.53 6.618-5.35L143.903 14c7.986-6.97 11.978-10.45 16.322-12.15a26.72 26.72 0 0 1 19.55 0c4.344 1.7 8.336 5.18 16.322 12.15l18.222 15.9c3.23 2.82 4.845 4.23 6.618 5.35a26.8 26.8 0 0 0 8.33 3.45c2.043.46 4.181.61 8.458.9z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='triangle']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 286'%3E%3Cpath d='M104.461 51.2c15.136-26.38 22.704-39.57 31.881-45.14a41.73 41.73 0 0 1 43.316 0c9.177 5.57 16.745 18.76 31.881 45.14l81.77 142.52c14.991 26.13 22.486 39.19 22.684 49.86a41.63 41.63 0 0 1-21.629 37.28c-9.37 5.14-24.445 5.14-54.594 5.14H76.23c-30.15 0-45.224 0-54.594-5.14a41.62 41.62 0 0 1-21.63-37.28c.199-10.67 7.694-23.73 22.685-49.86z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 316 286'%3E%3Cpath d='M104.461 51.2c15.136-26.38 22.704-39.57 31.881-45.14a41.73 41.73 0 0 1 43.316 0c9.177 5.57 16.745 18.76 31.881 45.14l81.77 142.52c14.991 26.13 22.486 39.19 22.684 49.86a41.63 41.63 0 0 1-21.629 37.28c-9.37 5.14-24.445 5.14-54.594 5.14H76.23c-30.15 0-45.224 0-54.594-5.14a41.62 41.62 0 0 1-21.63-37.28c.199-10.67 7.694-23.73 22.685-49.86z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='very-sunny']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M136.72 13.19c10.54-17.59 36.02-17.59 46.56 0l11.84 19.77c6.15 10.25 18.28 15.28 29.87 12.37l22.36-5.6c19.89-4.98 37.9 13.03 32.92 32.92l-5.6 22.36c-2.91 11.59 2.12 23.72 12.37 29.87l19.77 11.84c17.59 10.54 17.59 36.02 0 46.56l-19.77 11.84c-10.25 6.15-15.28 18.28-12.37 29.87l5.6 22.36c4.98 19.89-13.03 37.9-32.92 32.92l-22.36-5.6c-11.59-2.91-23.72 2.12-29.87 12.37l-11.84 19.77c-10.54 17.59-36.02 17.59-46.56 0l-11.84-19.77c-6.15-10.25-18.28-15.28-29.87-12.37l-22.364 5.6c-19.883 4.98-37.899-13.03-32.917-32.92l5.604-22.36c2.905-11.59-2.119-23.72-12.373-29.87l-19.773-11.84c-17.583-10.54-17.583-36.02 0-46.56l19.773-11.84c10.254-6.15 15.278-18.28 12.373-29.87l-5.604-22.36c-4.982-19.89 13.034-37.9 32.916-32.92l22.365 5.6c11.59 2.91 23.72-2.12 29.87-12.37z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M136.72 13.19c10.54-17.59 36.02-17.59 46.56 0l11.84 19.77c6.15 10.25 18.28 15.28 29.87 12.37l22.36-5.6c19.89-4.98 37.9 13.03 32.92 32.92l-5.6 22.36c-2.91 11.59 2.12 23.72 12.37 29.87l19.77 11.84c17.59 10.54 17.59 36.02 0 46.56l-19.77 11.84c-10.25 6.15-15.28 18.28-12.37 29.87l5.6 22.36c4.98 19.89-13.03 37.9-32.92 32.92l-22.36-5.6c-11.59-2.91-23.72 2.12-29.87 12.37l-11.84 19.77c-10.54 17.59-36.02 17.59-46.56 0l-11.84-19.77c-6.15-10.25-18.28-15.28-29.87-12.37l-22.364 5.6c-19.883 4.98-37.899-13.03-32.917-32.92l5.604-22.36c2.905-11.59-2.119-23.72-12.373-29.87l-19.773-11.84c-17.583-10.54-17.583-36.02 0-46.56l19.773-11.84c10.254-6.15 15.278-18.28 12.373-29.87l-5.604-22.36c-4.982-19.89 13.034-37.9 32.916-32.92l22.365 5.6c11.59 2.91 23.72-2.12 29.87-12.37z' fill='%23fff'/%3E%3C/svg%3E"); }
+			:host([type='wavy']) .shape { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='610 1101 1220 75'%3E%3Cpath d='M1870.425 1173.746c-29.448 0-58.665-7.477-84.493-21.622l-.09-.049c-43.555-23.82-95.546-23.809-139.091.039l-.113.062c-25.803 14.109-54.984 21.567-84.394 21.568-29.449 0-58.667-7.478-84.495-21.623-43.554-23.852-95.539-23.865-139.089-.052l-.092.051c-25.83 14.146-55.048 21.623-84.497 21.623-29.423 0-58.613-7.463-84.425-21.584l-.077-.042c-43.572-23.863-95.596-23.862-139.164-.001l-.085.046c-25.809 14.117-55.001 21.581-84.418 21.581h-.001c-29.45-.001-58.669-7.479-84.498-21.625-43.534-23.845-95.513-23.863-139.063-.058l-.108.06c-25.829 14.146-55.047 21.623-84.496 21.623-29.398 0-58.566-7.451-84.362-21.551l-.142-.075c-43.568-23.863-95.593-23.863-139.163 0l-.081.043c-25.811 14.12-55.001 21.583-84.421 21.583-29.45 0-58.668-7.478-84.497-21.624-7.521-4.118-10.278-13.554-6.159-21.074s13.554-10.277 21.074-6.158c43.57 23.862 95.593 23.864 139.163 0l.098-.053c25.807-14.114 54.991-21.573 84.406-21.573 29.398 0 58.567 7.451 84.364 21.55l.14.076c43.534 23.843 95.508 23.864 139.056.059l.113-.063c25.828-14.145 55.049-21.622 84.496-21.622h.002c29.449 0 58.668 7.478 84.497 21.625 43.57 23.863 95.595 23.862 139.165.001q.032-.019.065-.036c25.813-14.124 55.011-21.591 84.438-21.591 29.42 0 58.61 7.463 84.421 21.582l.082.045c43.539 23.847 95.521 23.862 139.074.049l.096-.053c25.829-14.146 55.047-21.623 84.496-21.623s58.667 7.477 84.496 21.623c43.58 23.867 95.604 23.866 139.172.005l.118-.064c25.803-14.108 54.98-21.564 84.389-21.564 29.448-.001 58.666 7.476 84.494 21.62l.114.063c43.549 23.807 95.528 23.791 139.063-.051 7.52-4.121 16.955-1.361 21.073 6.159 4.119 7.521 1.361 16.955-6.159 21.073-25.828 14.146-55.045 21.622-84.492 21.622' fill='%23fff'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='610 1101 1220 75'%3E%3Cpath d='M1870.425 1173.746c-29.448 0-58.665-7.477-84.493-21.622l-.09-.049c-43.555-23.82-95.546-23.809-139.091.039l-.113.062c-25.803 14.109-54.984 21.567-84.394 21.568-29.449 0-58.667-7.478-84.495-21.623-43.554-23.852-95.539-23.865-139.089-.052l-.092.051c-25.83 14.146-55.048 21.623-84.497 21.623-29.423 0-58.613-7.463-84.425-21.584l-.077-.042c-43.572-23.863-95.596-23.862-139.164-.001l-.085.046c-25.809 14.117-55.001 21.581-84.418 21.581h-.001c-29.45-.001-58.669-7.479-84.498-21.625-43.534-23.845-95.513-23.863-139.063-.058l-.108.06c-25.829 14.146-55.047 21.623-84.496 21.623-29.398 0-58.566-7.451-84.362-21.551l-.142-.075c-43.568-23.863-95.593-23.863-139.163 0l-.081.043c-25.811 14.12-55.001 21.583-84.421 21.583-29.45 0-58.668-7.478-84.497-21.624-7.521-4.118-10.278-13.554-6.159-21.074s13.554-10.277 21.074-6.158c43.57 23.862 95.593 23.864 139.163 0l.098-.053c25.807-14.114 54.991-21.573 84.406-21.573 29.398 0 58.567 7.451 84.364 21.55l.14.076c43.534 23.843 95.508 23.864 139.056.059l.113-.063c25.828-14.145 55.049-21.622 84.496-21.622h.002c29.449 0 58.668 7.478 84.497 21.625 43.57 23.863 95.595 23.862 139.165.001q.032-.019.065-.036c25.813-14.124 55.011-21.591 84.438-21.591 29.42 0 58.61 7.463 84.421 21.582l.082.045c43.539 23.847 95.521 23.862 139.074.049l.096-.053c25.829-14.146 55.047-21.623 84.496-21.623s58.667 7.477 84.496 21.623c43.58 23.867 95.604 23.866 139.172.005l.118-.064c25.803-14.108 54.98-21.564 84.389-21.564 29.448-.001 58.666 7.476 84.494 21.62l.114.063c43.549 23.807 95.528 23.791 139.063-.051 7.52-4.121 16.955-1.361 21.073 6.159 4.119 7.521 1.361 16.955-6.159 21.073-25.828 14.146-55.045 21.622-84.492 21.622' fill='%23fff'/%3E%3C/svg%3E"); }
+
+			:host([border]) .shape { border: 0.0625rem solid var(--color-outline-variant); }
+			:host([shadow]) .shape { box-shadow: var(--shadow-1); }
+
+			:host([color='secondary']) .shape { --_shape-bg: var(--color-secondary-container); --_shape-fg: var(--color-on-secondary-container); }
+			:host([color='tertiary']) .shape { --_shape-bg: var(--color-tertiary-container); --_shape-fg: var(--color-on-tertiary-container); }
+			:host([color='surface']) .shape { --_shape-bg: var(--color-surface-container-highest); --_shape-fg: var(--color-on-surface); }
+		`
+    ]; }
+    render() {
+        const style = this.shapeRadius ? `--_radius: ${this.shapeRadius};` : '';
+        return html `
+			<div class="shape" part="shape" style="${style}">
+				<slot></slot>
+			</div>
+		`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniShape.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniShape.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniShape.prototype, "border", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniShape.prototype, "shadow", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'shape-radius' })
+], MoniShape.prototype, "shapeRadius", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniShape.prototype, "color", void 0);
+MoniShape = __decorate([
+    customElement('moni-shape')
+], MoniShape);
+export { MoniShape };
+export default MoniShape;

package/dist/components/moni-side-sheet.d.ts

@@ -0,0 +1,62 @@
+import { PropertyValues } from 'lit';
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+import './moni-button.js';
+/**
+ * Material Design 3 Side Sheet Component.
+ * Can act as a standard (non-modal) side sheet or a modal side sheet.
+ *
+ * Attributes:
+ *  - open:            boolean (reflect: true)
+ *  - modal:           boolean (reflect: true)
+ *  - side:            'right' | 'left' (default: 'right')
+ *  - title:           Header text (default: '')
+ *  - detached:        boolean (adds 16px/16dp margins/rounded corners all around)
+ *  - showClose:       boolean (shows standard close button)
+ *  - showBack:        boolean (shows standard back button)
+ *  - noBorder:        boolean (removes borders, default: false)
+ *  - withHandle:      boolean (shows grab handle and enables dragging to close/resize, default: false)
+ *  - expanded-width:  string (width when expanded, default: '600px')
+ *  - max-width:       string (maximum width restriction, default: '100%')
+ *
+ * Events:
+ *  - close:       Fired when the sheet is closed/dismissed
+ */
+export declare class MoniSideSheet extends MoniElement {
+    open: boolean;
+    modal: boolean;
+    side: 'right' | 'left';
+    title: string;
+    detached: boolean;
+    showBack: boolean;
+    noBorder: boolean;
+    withHandle: boolean;
+    hideClose: boolean;
+    expandedWidth: string;
+    maxWidth: string;
+    private _dialog;
+    private _isDragging;
+    private _startX;
+    private _currentTranslationX;
+    private _sheetWidth;
+    private _defaultWidth;
+    private _justDragged;
+    private _getMaxWidthPx;
+    updated(changedProperties: PropertyValues): void;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _onCloseClick;
+    private _onBackClick;
+    private _onDialogClick;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-side-sheet': MoniSideSheet;
+    }
+}
+export default MoniSideSheet;
+//# sourceMappingURL=moni-side-sheet.d.ts.map

package/dist/components/moni-side-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-side-sheet.d.ts","sourceRoot":"","sources":["../../src/components/moni-side-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IACb,KAAK,UAAS;IAC7B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAW;IACjC,KAAK,SAAM;IACI,QAAQ,UAAS;IACO,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACf,UAAU,UAAS;IACpB,SAAS,UAAS;IAC7B,aAAa,SAAW;IAC7B,QAAQ,SAAM;IAElD,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,oBAAoB,CAAK;IACjC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,cAAc;IAcb,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAyDlD,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,YAAY;IAiFpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAUtB,OAAgB,MAAM,4BAgMpB;IAEO,MAAM;CA0Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}