@redvars/peacock 3.2.7 → 3.2.9

package/dist/chip.js

@@ -1,303 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b, A } from './lit-element-CA46RFZ_.js';
-import { e } from './class-map-BmCohX9p.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z$2 = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-block;
-  --chip-container-color: var(--color-surface);
-  --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
-  --chip-container-shape: var(--shape-corner-small);
-}
-
-:host-context([data-theme=dark]) {
-  --chip-hover-color: var(--color-primary-30);
-}
-
-.chip {
-  position: relative;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
-  width: 100%;
-  border-radius: var(--chip-container-shape);
-}
-.chip .tag-content {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--chip-label-text-color);
-  font-family: var(--typography-label-small-font-family) !important;
-  font-size: var(--typography-label-small-font-size) !important;
-  font-weight: var(--typography-label-small-font-weight) !important;
-  line-height: var(--typography-label-small-line-height) !important;
-  letter-spacing: var(--typography-label-small-letter-spacing) !important;
-  gap: 0.5rem;
-}
-.chip .tag-content .tag-image {
-  width: 1.125rem;
-  height: 1.125rem;
-  border-radius: 100%;
-  background: var(--chip-hover-color);
-}
-.chip .close-btn {
-  border-radius: 12px;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: transparent;
-  line-height: 0;
-  cursor: pointer;
-  --icon-size: 1rem;
-}
-.chip .close-btn .close-btn-icon {
-  --icon-size: 1rem;
-}
-.chip .close-btn:hover {
-  background: var(--chip-hover-color);
-}
-.chip .close-btn:hover .close-btn-icon {
-  color: var(--background);
-}
-.chip {
-  /**
-   * Tag background layers
-   */
-}
-.chip .background {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--chip-container-color);
-  pointer-events: none;
-}
-.chip .outline {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  border: 1px solid var(--chip-outline-color);
-}
-.chip .elevation {
-  --elevation-level: 0;
-  transition-duration: 280ms;
-  border-radius: inherit;
-}
-.chip.dismissible .tag-content {
-  padding-inline-end: 0.25rem;
-}
-.chip.selected {
-  color: var(--background);
-  background: var(--chip-hover-color);
-}
-.chip.selected .close-btn-icon {
-  color: var(--background);
-}`;
-
-var css_248z$1 = i`:host([color=red]) {
-  --chip-container-color: var(--color-red-container);
-  --chip-outline-color: var(--color-on-red-container);
-}
-
-:host([color=green]) {
-  --chip-container-color: var(--color-green-container);
-  --chip-label-text-color: var(--color-on-green-container);
-  --chip-outline-color: var(--color-on-green-container);
-}
-
-:host([color=blue]) {
-  --chip-container-color: var(--color-blue-container);
-  --chip-label-text-color: var(--color-on-blue-container);
-  --chip-outline-color: var(--color-on-blue-container);
-}
-
-:host([color=yellow]) {
-  --chip-container-color: var(--color-yellow-container);
-  --chip-label-text-color: var(--color-on-yellow-container);
-  --chip-outline-color: var(--color-on-yellow-container);
-}
-
-:host([color=purple]) {
-  --chip-container-color: var(--color-purple-container);
-  --chip-label-text-color: var(--color-on-purple-container);
-  --chip-outline-color: var(--color-on-purple-container);
-}`;
-
-var css_248z = i`.tag {
-  font-family: var(--font-family-sans) !important;
-}
-
-.tag.size-xs,
-.tag.size-extra-small {
-  --_button-height: 2rem;
-  --_button-icon-size: 1.25rem;
-  --_container-padding: 0.75rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.tag.size-sm,
-.tag.size-small {
-  --_button-height: 2.5rem;
-  --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
-  --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
-  font-size: 1rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.5rem !important;
-  letter-spacing: 0.15px !important;
-}
-
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
-  --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2rem !important;
-  letter-spacing: 0 !important;
-}
-
-.button.size-xl {
-  --_button-height: 8.5rem;
-  --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
-  font-size: 2rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2.5rem !important;
-  letter-spacing: 0 !important;
-}`;
-
-/**
- * @label Chip
- * @tag base-chip
- * @rawTag chip
- * @summary
- *
- * @example
- * ```html
- * <base-tag>Link</base-tag>
- * ```
- * @tags display
- */
-class Chip extends i$1 {
-    constructor() {
-        super(...arguments);
-        /** If true, the tag will have a close icon. */
-        this.dismissible = false;
-        /** Tag color. */
-        this.color = 'default';
-        /** Tag value. */
-        this.value = '';
-        /** If true, the tag will be selected. */
-        this.selected = false;
-    }
-    _dismissClickHandler(e) {
-        e.stopPropagation();
-        const detail = { value: this.value || this.textContent?.trim() };
-        // Custom Event: tag--dismiss
-        this.dispatchEvent(new CustomEvent('tag--dismiss', {
-            detail,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _renderCloseButton() {
-        if (!this.dismissible)
-            return null;
-        return b `
-      <button
-        class="close-btn"
-        @click=${this._dismissClickHandler}
-        aria-label="Dismiss"
-      >
-        <base-icon class="close-btn-icon" name="close"></base-icon>
-      </button>
-    `;
-    }
-    _renderImage() {
-        if (this.imageSrc)
-            return b `<img
-        src=${this.imageSrc}
-        class="tag-image"
-        alt="Tag Logo"
-      />`;
-        return A;
-    }
-    render() {
-        const classes = {
-            chip: true,
-            selected: this.selected,
-            dismissible: this.dismissible,
-            [`color-${this.color}`]: true,
-        };
-        return b `
-      <div class="${e(classes)}">
-        <base-elevation class="elevation"></base-elevation>
-        <div class="background"></div>
-        <div class="outline"></div>
-
-        <div class="tag-content">
-          <slot name="icon"></slot>
-          <slot></slot>
-          ${this._renderCloseButton()}
-        </div>
-      </div>
-    `;
-    }
-}
-// Define styles (Lit handles Scoping via Shadow DOM by default)
-// You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$2, css_248z$1, css_248z];
-__decorate([
-    n({ type: Boolean })
-], Chip.prototype, "dismissible", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "color", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Chip.prototype, "value", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Chip.prototype, "selected", void 0);
-__decorate([
-    n({ type: String })
-], Chip.prototype, "imageSrc", void 0);
-
-export { Chip };
-//# sourceMappingURL=chip.js.map

package/dist/chip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chip.js","sources":["../../src/chip/chip/chip.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './chip.scss';\nimport colorStyles from './chip-colors.scss';\nimport sizeStyles from './chip-sizes.scss';\n\n/**\n * @label Chip\n * @tag base-chip\n * @rawTag chip\n * @summary\n *\n * @example\n * ```html\n * <base-tag>Link</base-tag>\n * ```\n * @tags display\n */\nexport class Chip extends LitElement {\n  // Define styles (Lit handles Scoping via Shadow DOM by default)\n  // You would typically import your tag.scss.js here or use the css tag\n  static styles = [styles, colorStyles, sizeStyles];\n\n  /** If true, the tag will have a close icon. */\n  @property({ type: Boolean }) dismissible = false;\n\n  /** Tag color. */\n  @property({ type: String, reflect: true }) color?:\n    | 'default'\n    | 'blue'\n    | 'green'\n    | 'red'\n    | 'yellow' = 'default';\n\n  /** Tag value. */\n  @property({ type: String, reflect: true }) value = '';\n\n  /** If true, the tag will be selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Image source. */\n  @property({ type: String }) imageSrc?: string;\n\n  private _dismissClickHandler(e: MouseEvent) {\n    e.stopPropagation();\n    const detail = { value: this.value || this.textContent?.trim() };\n\n    // Custom Event: tag--dismiss\n    this.dispatchEvent(\n      new CustomEvent('tag--dismiss', {\n        detail,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _renderCloseButton() {\n    if (!this.dismissible) return null;\n\n    return html`\n      <button\n        class=\"close-btn\"\n        @click=${this._dismissClickHandler}\n        aria-label=\"Dismiss\"\n      >\n        <base-icon class=\"close-btn-icon\" name=\"close\"></base-icon>\n      </button>\n    `;\n  }\n\n  private _renderImage() {\n    if (this.imageSrc)\n      return html`<img\n        src=${this.imageSrc}\n        class=\"tag-image\"\n        alt=\"Tag Logo\"\n      />`;\n    return nothing;\n  }\n\n  render() {\n    const classes = {\n      chip: true,\n      selected: this.selected,\n      dismissible: this.dismissible,\n      [`color-${this.color}`]: true,\n    };\n\n    return html`\n      <div class=\"${classMap(classes)}\">\n        <base-elevation class=\"elevation\"></base-elevation>\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        <div class=\"tag-content\">\n          <slot name=\"icon\"></slot>\n          <slot></slot>\n          ${this._renderCloseButton()}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","nothing","classMap","styles","colorStyles","sizeStyles","property"],"mappings":"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"}

package/dist/container.js

@@ -1,135 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-import { e } from './class-map-BmCohX9p.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-}
-
-.container-wrapper {
-  container: containerwrapper/inline-size;
-}
-.container-wrapper.size-max .container {
-  max-width: var(--container-max);
-}
-.container-wrapper.size-xl .container {
-  max-width: var(--container-xl);
-}
-.container-wrapper.size-sm .container {
-  max-width: var(--container-sm);
-}
-.container-wrapper.size-md .container {
-  max-width: var(--container-md);
-}
-.container-wrapper.size-lg .container {
-  max-width: var(--container-lg);
-}
-
-.container {
-  margin: auto;
-  width: 100%;
-}
-.container .content {
-  padding: v(--spacing-200);
-}
-
-:host(.debug) {
-  border-width: 0 1px;
-  border-color: var(--color-red);
-  border-style: solid;
-  background: var(--color-red-50);
-}
-:host(.debug) .container {
-  border-width: 0 1px;
-  border-color: var(--color-blue);
-  border-style: solid;
-  background: var(--color-blue-100);
-}
-:host(.debug) .container .content {
-  border-width: 0 1px;
-  border-color: var(--color-green);
-  border-style: solid;
-  background: var(--color-green-100);
-}
-
-.content {
-  margin-inline: 0;
-}
-
-@container containerwrapper (min-width: 672px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1056px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1312px) {
-  .content {
-    margin-inline: var(--spacing-200);
-  }
-}
-@container containerwrapper (min-width: 1584px) {
-  .content {
-    margin-inline: var(--spacing-300);
-  }
-}`;
-
-/**
- * @label Container
- * @tag base-container
- * @rawTag container
- * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
- *
- * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
- * @cssprop --avatar-size - Controls the size of the avatar.
- * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
- *
- *
- * @example
- * ```html
- * <base-container>Container</base-avatar>
- * ```
- *
- * @tags display
- */
-class Container extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.size = 'full';
-    }
-    render() {
-        const wrapperClasses = {
-            'container-wrapper': true,
-            [`size-${this.size}`]: true,
-        };
-        return b `
-      <div class=${e(wrapperClasses)}>
-        <div class="container">
-          <div class="content">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-Container.styles = [css_248z];
-__decorate([
-    n({ type: String, reflect: true })
-], Container.prototype, "size", void 0);
-
-export { Container };
-//# sourceMappingURL=container.js.map

package/dist/container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"container.js","sources":["../../src/container/container.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './container.scss';\n\ntype ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';\n\n/**\n * @label Container\n * @tag base-container\n * @rawTag container\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-background-color - Controls the color of the avatar.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <base-container>Container</base-avatar>\n * ```\n *\n * @tags display\n */\nexport class Container extends LitElement {\n  @property({ type: String, reflect: true })\n  size: ContainerSize = 'full';\n\n  static styles = [styles];\n\n  render() {\n    const wrapperClasses = {\n      'container-wrapper': true,\n      [`size-${this.size}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div class=\"container\">\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;AAkBG;AACG,MAAO,SAAU,SAAQA,GAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QAEE,IAAA,CAAA,IAAI,GAAkB,MAAM;IAoB9B;IAhBE,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,mBAAmB,EAAE,IAAI;AACzB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,cAAc,CAAC,CAAA;;;;;;;KAOtC;IACH;;AAjBO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAFxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/divider.js

@@ -1,126 +0,0 @@
-import { _ as __decorate, n } from './property-DNVWDdPC.js';
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-import { r } from './state-CV1fRmOT.js';
-import { e } from './class-map-BmCohX9p.js';
-import { o as observerSlotChangesWithCallback } from './utils-DGMeCC48.js';
-import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: block;
-  --divider-color: var(--color-outline-variant);
-  --divider-spacing: var(--spacing-200);
-  --divider-line-thinkness: 2px;
-}
-
-.divider {
-  display: flex;
-  margin: 0;
-  font-family: var(--typography-body-medium-font-family) !important;
-  font-size: var(--typography-body-medium-font-size) !important;
-  font-weight: var(--typography-body-medium-font-weight) !important;
-  line-height: var(--typography-body-medium-line-height) !important;
-  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
-  color: var(--divider-color);
-  --_line-border: var(--divider-line-thinkness) solid var(--divider-color);
-}
-.divider:not(.vertical) {
-  width: 100%;
-  padding: var(--divider-spacing) 0;
-  align-items: center;
-  justify-content: center;
-}
-.divider:not(.vertical) .line {
-  width: 100%;
-  border-top: var(--_line-border);
-}
-.divider:not(.vertical).slot-has-content .slot-container {
-  padding: 0 var(--spacing-200);
-}
-.divider.vertical {
-  height: 100%;
-  padding: 0 var(--divider-spacing);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.divider.vertical .line {
-  height: 100%;
-  border-right: var(--_line-border);
-}
-.divider.vertical.slot-has-content .slot-container {
-  padding: var(--spacing-200) 0;
-}
-
-:host(:not([vertical])) {
-  width: auto;
-}
-
-:host([vertical]) {
-  height: auto;
-}`;
-
-/**
- * @label Divider
- * @tag base-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
- * <base-divider style="width: 12rem;">or</base-divider>
- * ```
- * @tags display
- */
-class Divider extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.vertical = false;
-        this.slotHasContent = false;
-    }
-    firstUpdated() {
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
-            this.slotHasContent = hasContent;
-            this.requestUpdate();
-        });
-    }
-    render() {
-        return b `<div
-      class=${e({
-            divider: true,
-            vertical: this.vertical,
-            'slot-has-content': this.slotHasContent,
-        })}
-    >
-      <div class="line"></div>
-      <div class="slot-container">
-        <slot></slot>
-      </div>
-      <div class="line"></div>
-    </div>`;
-    }
-}
-Divider.styles = [css_248z];
-__decorate([
-    n({ type: Boolean, reflect: true })
-], Divider.prototype, "vertical", void 0);
-__decorate([
-    r()
-], Divider.prototype, "slotHasContent", void 0);
-
-export { Divider };
-//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -1 +0,0 @@
-{"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 base-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 * <base-divider style=\"width: 12rem;\">or</base-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.js

@@ -1,79 +0,0 @@
-import { i, a as i$1, b } from './lit-element-CA46RFZ_.js';
-
-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-start-start-radius: var(--elevation-container-shape-start-start, var(--elevation-container-shape));
-  border-start-end-radius: var(--elevation-container-shape-start-end, var(--elevation-container-shape));
-  border-end-start-radius: var(--elevation-container-shape-end-start, var(--elevation-container-shape));
-  border-end-end-radius: var(--elevation-container-shape-end-end, var(--elevation-container-shape));
-  corner-shape: var(--elevation-container-shape-variant);
-  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;
-}`;
-
-/**
- * @label Elevation
- * @tag base-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);">
- *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-elevation>
- *     Level 2
- *   </div>
- * ```
- * @tags display
- */
-class Elevation extends i$1 {
-    render() {
-        return b `<span class="shadow"></span>`;
-    }
-}
-Elevation.styles = [css_248z];
-
-export { Elevation };
-//# sourceMappingURL=elevation.js.map

package/dist/elevation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\n\n/**\n * @label Elevation\n * @tag base-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);\">\n *     <base-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></base-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;;;;;;;;;;;;;;;;;;;;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;;;;"}