@redvars/peacock 3.1.2 → 3.1.3

package/dist/directive-CkFJvUQK.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const PartType = {
+    ATTRIBUTE: 1,
+    CHILD: 2};
+/**
+ * Creates a user-facing directive function from a Directive class. This
+ * function has the same parameters as the directive's render() method.
+ */
+const directive = (c) => (...values) => ({
+    // This property needs to remain unminified.
+    ['_$litDirective$']: c,
+    values,
+});
+/**
+ * Base class for creating custom directives. Users should extend this class,
+ * implement `render` and/or `update`, and then pass their subclass to
+ * `directive`.
+ */
+class Directive {
+    constructor(_partInfo) { }
+    // See comment in Disconnectable interface for why this is a getter
+    get _$isConnected() {
+        return this._$parent._$isConnected;
+    }
+    /** @internal */
+    _$initialize(part, parent, attributeIndex) {
+        this.__part = part;
+        this._$parent = parent;
+        this.__attributeIndex = attributeIndex;
+    }
+    /** @internal */
+    _$resolve(part, props) {
+        return this.update(part, props);
+    }
+    update(_part, props) {
+        return this.render(...props);
+    }
+}
+
+export { Directive as D, PartType as P, directive as d };
+//# sourceMappingURL=directive-CkFJvUQK.js.map

package/dist/directive-CkFJvUQK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directive-CkFJvUQK.js","sources":["../node_modules/lit-html/development/directive.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nexport const PartType = {\n    ATTRIBUTE: 1,\n    CHILD: 2,\n    PROPERTY: 3,\n    BOOLEAN_ATTRIBUTE: 4,\n    EVENT: 5,\n    ELEMENT: 6,\n};\n/**\n * Creates a user-facing directive function from a Directive class. This\n * function has the same parameters as the directive's render() method.\n */\nexport const directive = (c) => (...values) => ({\n    // This property needs to remain unminified.\n    ['_$litDirective$']: c,\n    values,\n});\n/**\n * Base class for creating custom directives. Users should extend this class,\n * implement `render` and/or `update`, and then pass their subclass to\n * `directive`.\n */\nexport class Directive {\n    constructor(_partInfo) { }\n    // See comment in Disconnectable interface for why this is a getter\n    get _$isConnected() {\n        return this._$parent._$isConnected;\n    }\n    /** @internal */\n    _$initialize(part, parent, attributeIndex) {\n        this.__part = part;\n        this._$parent = parent;\n        this.__attributeIndex = attributeIndex;\n    }\n    /** @internal */\n    _$resolve(part, props) {\n        return this.update(part, props);\n    }\n    update(_part, props) {\n        return this.render(...props);\n    }\n}\n//# sourceMappingURL=directive.js.map"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACY,MAAC,QAAQ,GAAG;AACxB,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,KAAK,EAAE,CAKX;AACA;AACA;AACA;AACA;AACY,MAAC,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,MAAM,MAAM;AAChD;AACA,IAAI,CAAC,iBAAiB,GAAG,CAAC;AAC1B,IAAI,MAAM;AACV,CAAC;AACD;AACA;AACA;AACA;AACA;AACO,MAAM,SAAS,CAAC;AACvB,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE;AAC7B;AACA,IAAI,IAAI,aAAa,GAAG;AACxB,QAAQ,OAAO,IAAI,CAAC,QAAQ,CAAC,aAAa;AAC1C,IAAI;AACJ;AACA,IAAI,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE;AAC/C,QAAQ,IAAI,CAAC,MAAM,GAAG,IAAI;AAC1B,QAAQ,IAAI,CAAC,QAAQ,GAAG,MAAM;AAC9B,QAAQ,IAAI,CAAC,gBAAgB,GAAG,cAAc;AAC9C,IAAI;AACJ;AACA,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE;AAC3B,QAAQ,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC;AACvC,IAAI;AACJ,IAAI,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE;AACzB,QAAQ,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;AACpC,IAAI;AACJ;;;;","x_google_ignoreList":[0]}

package/dist/divider/divider.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * @label Divider
+ * @tag p-divider
+ * @rawTag divider
+ *
+ * @summary The divider component is used to visually separate content.
+ * @overview
+ *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.
+ *  - They can be oriented either vertically or horizontally, depending on the layout requirements.
+ *
+ * @cssprop --divider-color - Controls the color of the divider.
+ * @cssprop --divider-padding - Controls the padding of the divider.
+ *
+ * @example
+ * ```html
+ * <p-divider style="width: 12rem;">or</p-divider>
+ * ```
+ * @tags display
+ */
+export declare class Divider extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    vertical: boolean;
+    slotHasContent: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=divider.d.ts.map

package/dist/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,iCAAY;IAEmB,QAAQ,UAAS;IAG7D,cAAc,UAAS;IAEvB,YAAY;IAUZ,MAAM;CAeP"}

package/dist/divider/index.d.ts

@@ -0,0 +1,2 @@
+export { Divider } from './divider.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/divider.js

@@ -1,67 +1,63 @@
-import { i, _ as __decorate, n, a as i$1, b } from './property-D4Kn9TsY.js';
-import { r } from './state-CxzmLNIi.js';
-import { e } from './class-map-DpvLRi0h.js';
-import { o as observerSlotChangesWithCallback } from './utils-_5no4mk7.js';
+import { _ as __decorate, n } from './property-CR1ZrEd9.js';
+import { i, a as i$1, b } from './lit-element-CkD27PXL.js';
+import { r, o as observerSlotChangesWithCallback } from './utils-CY3RyfcA.js';
+import { e } from './class-map-Cavm-B1S.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
 import './directive-BKuZRRPO.js';
 
-const styles = i `
-  :host {
-    display: block;
-
-    --divider-color: var(--color-outline-variant);
-    --divider-padding: var(--spacing-200);
-  }
-
-  .divider {
-    display: flex;
-    margin: 0;
-    @include get-typography(body-small-emphasized);
-    color: var(--divider-color);
-
-    &:not(.vertical) {
-      width: 100%;
-      padding: var(--divider-padding) 0;
-      align-items: center;
-      justify-content: center;
-
-      .line {
-        width: 100%;
-        border-top: 1px solid var(--divider-color);
-      }
-
-      &.slot-has-content .slot-container {
-        padding: 0 var(--spacing-200);
-      }
-    }
-
-    &.vertical {
-      height: 100%;
-      padding: 0 var(--divider-padding);
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      .line {
-        height: 100%;
-        border-right: 1px solid var(--divider-color);
-      }
+var css_248z = i`:host {
+  display: block;
+  --divider-color: var(--color-outline-variant);
+  --divider-padding: var(--spacing-200);
+}
 
-      &.slot-has-content .slot-container {
-        padding: var(--spacing-200) 0;
-      }
-    }
-  }
+.divider {
+  display: flex;
+  margin: 0;
+  font-family: var(--typography-body-small-emphasized-font-family) !important;
+  font-size: var(--typography-body-small-emphasized-font-size) !important;
+  font-weight: var(--typography-body-small-emphasized-font-weight) !important;
+  line-height: var(--typography-body-small-emphasized-line-height) !important;
+  letter-spacing: var(--typography-body-small-emphasized-letter-spacing) !important;
+  color: var(--divider-color);
+}
+.divider:not(.vertical) {
+  width: 100%;
+  padding: var(--divider-padding) 0;
+  align-items: center;
+  justify-content: center;
+}
+.divider:not(.vertical) .line {
+  width: 100%;
+  border-top: 1px solid var(--divider-color);
+}
+.divider:not(.vertical).slot-has-content .slot-container {
+  padding: 0 var(--spacing-200);
+}
+.divider.vertical {
+  height: 100%;
+  padding: 0 var(--divider-padding);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.divider.vertical .line {
+  height: 100%;
+  border-right: 1px solid var(--divider-color);
+}
+.divider.vertical.slot-has-content .slot-container {
+  padding: var(--spacing-200) 0;
+}
 
-  :host(:not([vertical])) {
-    width: auto;
-  }
+:host(:not([vertical])) {
+  width: auto;
+}
 
-  :host([vertical]) {
-    height: auto;
-  }
-`;
+:host([vertical]) {
+  height: auto;
+}`;
+styleInject(css_248z);
 
-var _Divider_instances;
 /**
  * @label Divider
  * @tag p-divider
@@ -84,7 +80,6 @@ var _Divider_instances;
 class Divider extends i$1 {
     constructor() {
         super(...arguments);
-        _Divider_instances.add(this);
         this.vertical = false;
         this.slotHasContent = false;
     }
@@ -110,8 +105,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-_Divider_instances = new WeakSet();
-Divider.styles = [styles];
+Divider.styles = [css_248z];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);

package/dist/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/divider.css.ts","../../src/divider/divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n\n    --divider-color: var(--color-outline-variant);\n    --divider-padding: var(--spacing-200);\n  }\n\n  .divider {\n    display: flex;\n    margin: 0;\n    @include get-typography(body-small-emphasized);\n    color: var(--divider-color);\n\n    &:not(.vertical) {\n      width: 100%;\n      padding: var(--divider-padding) 0;\n      align-items: center;\n      justify-content: center;\n\n      .line {\n        width: 100%;\n        border-top: 1px solid var(--divider-color);\n      }\n\n      &.slot-has-content .slot-container {\n        padding: 0 var(--spacing-200);\n      }\n    }\n\n    &.vertical {\n      height: 100%;\n      padding: 0 var(--divider-padding);\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n\n      .line {\n        height: 100%;\n        border-right: 1px solid var(--divider-color);\n      }\n\n      &.slot-has-content .slot-container {\n        padding: var(--spacing-200) 0;\n      }\n    }\n  }\n\n  :host(:not([vertical])) {\n    width: auto;\n  }\n\n  :host([vertical]) {\n    height: auto;\n  }\n`;\n","import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './divider.css.js';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Divider\n * @tag p-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n *  - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <p-divider style=\"width: 12rem;\">or</p-divider>\n * ```\n * @tags display\n */\nexport class Divider extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        divider: true,\n        vertical: this.vertical,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <div class=\"line\"></div>\n      <div class=\"slot-container\">\n        <slot></slot>\n      </div>\n      <div class=\"line\"></div>\n    </div>`;\n  }\n\n  #handleSlotChange(event: { target: any }) {\n    const slot = event.target;\n    // Check assignedElements length\n    this.slotHasContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n}\n"],"names":["css","LitElement","html","classMap","property","state"],"mappings":";;;;;;AAEO,MAAM,MAAM,GAAGA,CAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB;;;ACnDD;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,OAAQ,SAAQC,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;;QAG8C,IAAA,CAAA,QAAQ,GAAG,KAAK;QAG5D,IAAA,CAAA,cAAc,GAAG,KAAK;IAiCxB;IA/BE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG;IACT;;kCAMC;AArCM,OAAA,CAAA,MAAM,GAAG,CAAC,MAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG7D,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}
+{"version":3,"file":"divider.js","sources":["../../src/divider/divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './divider.scss';\nimport { observerSlotChangesWithCallback } from '../utils.js';\n\n/**\n * @label Divider\n * @tag p-divider\n * @rawTag divider\n *\n * @summary The divider component is used to visually separate content.\n * @overview\n *  - Dividers are used to separate content into clear groups, making it easier for users to scan and understand the information presented.\n *  - They can be oriented either vertically or horizontally, depending on the layout requirements.\n *\n * @cssprop --divider-color - Controls the color of the divider.\n * @cssprop --divider-padding - Controls the padding of the divider.\n *\n * @example\n * ```html\n * <p-divider style=\"width: 12rem;\">or</p-divider>\n * ```\n * @tags display\n */\nexport class Divider extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  @state()\n  slotHasContent = false;\n\n  firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        divider: true,\n        vertical: this.vertical,\n        'slot-has-content': this.slotHasContent,\n      })}\n    >\n      <div class=\"line\"></div>\n      <div class=\"slot-container\">\n        <slot></slot>\n      </div>\n      <div class=\"line\"></div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,OAAQ,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;QAG8C,IAAA,CAAA,QAAQ,GAAG,KAAK;QAG5D,IAAA,CAAA,cAAc,GAAG,KAAK;IA2BxB;IAzBE,YAAY,GAAA;AACV,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,kBAAkB,EAAE,IAAI,CAAC,cAAc;SACxC,CAAC;;;;;;;WAOG;IACT;;AA/BO,OAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAmB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAG7D,UAAA,CAAA;AADC,IAAAC,CAAK;AACiB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/elevation/elevation.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ *   <div style="position: relative; padding: var(--spacing-200); border-radius: var(--shape-corner-small);">
+ *     <p-elevation style='--elevation-level: 2'></p-elevation>
+ *     Level 2
+ *   </div>
+ * ```
+ * @tags display
+ */
+export declare class Elevation extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=elevation.d.ts.map

package/dist/elevation/elevation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,iCAAY;IAEzB,MAAM;CAGP"}

package/dist/elevation/index.d.ts

@@ -0,0 +1,2 @@
+export { Elevation } from './elevation.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elevation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/elevation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/elevation-Bl1N6qEq.js

@@ -0,0 +1,100 @@
+import { i, a as i$1, b } from './lit-element-DHH1_Q-3.js';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = i`/**
+ * Derived from Material Design Elevation
+ * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
+ */
+:host,
+.shadow,
+.shadow::before,
+.shadow::after {
+  border-radius: inherit;
+  inset: 0;
+  position: absolute;
+  transition-duration: inherit;
+  transition-property: inherit;
+  transition-timing-function: inherit;
+}
+
+:host {
+  display: flex;
+  pointer-events: none;
+  transition-property: box-shadow, opacity;
+  --elevation-level: 0;
+  --elevation-color: var(--elevation-color-default, black);
+}
+
+.shadow::before,
+.shadow::after {
+  content: "";
+  transition-property: box-shadow, opacity;
+  --_level: var(--elevation-level);
+  --_shadow-color: var(--elevation-color);
+}
+
+.shadow::before {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
+  opacity: 0.3;
+}
+
+.shadow::after {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+  opacity: 0.15;
+}`;
+styleInject(css_248z);
+
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ * <p-elevation></p-elevation>
+ * ```
+ * @tags display
+ */
+class Elevation extends i$1 {
+    render() {
+        return b `<span class="shadow"></span>`;
+    }
+}
+Elevation.styles = [css_248z];
+
+export { Elevation as E, styleInject as s };
+//# sourceMappingURL=elevation-Bl1N6qEq.js.map

package/dist/elevation-Bl1N6qEq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-Bl1N6qEq.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../../src/elevation/elevation.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\n\n/**\n * @label Elevation\n * @tag p-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n * <p-elevation></p-elevation>\n * ```\n * @tags display\n */\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtBA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/elevation-CbF5he8B.js

@@ -0,0 +1,103 @@
+import { i, a as i$1, b } from './lit-element-DHH1_Q-3.js';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = i`/**
+ * Derived from Material Design Elevation
+ * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
+ */
+:host,
+.shadow,
+.shadow::before,
+.shadow::after {
+  border-radius: inherit;
+  inset: 0;
+  position: absolute;
+  transition-duration: inherit;
+  transition-property: inherit;
+  transition-timing-function: inherit;
+}
+
+:host {
+  display: flex;
+  pointer-events: none;
+  transition-property: box-shadow, opacity;
+  --elevation-level: 0;
+  --elevation-color: var(--elevation-color-default, black);
+}
+
+.shadow::before,
+.shadow::after {
+  content: "";
+  transition-property: box-shadow, opacity;
+  --_level: var(--elevation-level);
+  --_shadow-color: var(--elevation-color);
+}
+
+.shadow::before {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
+  opacity: 0.3;
+}
+
+.shadow::after {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+  opacity: 0.15;
+}`;
+styleInject(css_248z);
+
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ *   <div style="position: relative; padding: var(--spacing-200); border-radius: var(--shape-corner-small);">
+ *     <p-elevation style='--elevation-level: 2'></p-elevation>
+ *     Level 2
+ *   </div>
+ * ```
+ * @tags display
+ */
+class Elevation extends i$1 {
+    render() {
+        return b `<span class="shadow"></span>`;
+    }
+}
+Elevation.styles = [css_248z];
+
+export { Elevation as E, styleInject as s };
+//# sourceMappingURL=elevation-CbF5he8B.js.map

package/dist/elevation-CbF5he8B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-CbF5he8B.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../../src/elevation/elevation.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\n\n/**\n * @label Elevation\n * @tag p-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n *   <div style=\"position: relative; padding: var(--spacing-200); border-radius: var(--shape-corner-small);\">\n *     <p-elevation style='--elevation-level: 2'></p-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["LitElement","html","styles"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtBA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/elevation-D3F6Z1jU.js

@@ -0,0 +1,100 @@
+import { c as css, L as LitElement, h as html } from './lit-element-B7NX__Gq.js';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = css`/**
+ * Derived from Material Design Elevation
+ * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
+ */
+:host,
+.shadow,
+.shadow::before,
+.shadow::after {
+  border-radius: inherit;
+  inset: 0;
+  position: absolute;
+  transition-duration: inherit;
+  transition-property: inherit;
+  transition-timing-function: inherit;
+}
+
+:host {
+  display: flex;
+  pointer-events: none;
+  transition-property: box-shadow, opacity;
+  --elevation-level: 0;
+  --elevation-color: var(--elevation-color-default, black);
+}
+
+.shadow::before,
+.shadow::after {
+  content: "";
+  transition-property: box-shadow, opacity;
+  --_level: var(--elevation-level);
+  --_shadow-color: var(--elevation-color);
+}
+
+.shadow::before {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
+  opacity: 0.3;
+}
+
+.shadow::after {
+  box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+  opacity: 0.15;
+}`;
+styleInject(css_248z);
+
+/**
+ * @label Elevation
+ * @tag p-elevation
+ * @rawTag elevation
+ *
+ * @summary Adds elevation to an element.
+ * @overview
+ *  - Elevation adds a shadow effect to an element to give it depth.
+ *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.
+ *
+ * @cssprop --elevation-level - Controls the elevation level of the shadow.
+ * @cssprop --elevation-color - Controls the color of the shadow.
+ *
+ * @example
+ * ```html
+ * <p-elevation></p-elevation>
+ * ```
+ * @tags display
+ */
+class Elevation extends LitElement {
+    render() {
+        return html `<span class="shadow"></span>`;
+    }
+}
+Elevation.styles = [css_248z];
+
+export { Elevation as E, styleInject as s };
+//# sourceMappingURL=elevation-D3F6Z1jU.js.map

package/dist/elevation-D3F6Z1jU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-D3F6Z1jU.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../../src/elevation/elevation.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\n\n/**\n * @label Elevation\n * @tag p-elevation\n * @rawTag elevation\n *\n * @summary Adds elevation to an element.\n * @overview\n *  - Elevation adds a shadow effect to an element to give it depth.\n *  - It can be used to create a sense of hierarchy or to draw attention to a particular element.\n *\n * @cssprop --elevation-level - Controls the elevation level of the shadow.\n * @cssprop --elevation-color - Controls the color of the shadow.\n *\n * @example\n * ```html\n * <p-elevation></p-elevation>\n * ```\n * @tags display\n */\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"],"names":["styles"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtBA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,SAAU,SAAQ,UAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACA,QAAM,CAAC;;;;","x_google_ignoreList":[0]}