@redvars/peacock 3.8.6 → 3.9.1

package/dist/elevation.js

@@ -39,13 +39,61 @@ var css_248z = i`* {
   transition-property: box-shadow, opacity;
   --elevation-level: 0;
   --elevation-color: var(--elevation-color-default, black);
+  /* Fallback values for side-specific levels, falling back to --elevation-level */
+  --_level-top: var(--elevation-level-block-start, var(--elevation-level, 0));
+  --_level-bottom: var(--elevation-level-block-end, var(--elevation-level, 0));
+  --_level-left: var(--elevation-level-inline-start, var(--elevation-level, 0));
+  --_level-right: var(--elevation-level-inline-end, var(--elevation-level, 0));
+}
+
+:host-context([dir=rtl]) {
+  --_level-left: var(--elevation-level-inline-end, var(--elevation-level, 0));
+  --_level-right: var(--elevation-level-inline-start, var(--elevation-level, 0));
+}
+
+:host([dir=rtl]) {
+  --_level-left: var(--elevation-level-inline-end, var(--elevation-level, 0));
+  --_level-right: var(--elevation-level-inline-start, var(--elevation-level, 0));
+}
+
+.shadow {
+  /* Set the default private level property */
+  --_level: var(--elevation-level, 0);
+}
+
+.shadow.block-start {
+  --_level: var(--_level-top);
+  clip-path: polygon(50% 50%, -950% -950%, 1050% -950%);
+}
+
+.shadow.block-end {
+  --_level: var(--_level-bottom);
+  clip-path: polygon(50% 50%, 1050% 1050%, -950% 1050%);
+}
+
+.shadow.inline-start {
+  --_level: var(--_level-left);
+  clip-path: polygon(50% 50%, -950% 1050%, -950% -950%);
+}
+
+.shadow.inline-end {
+  --_level: var(--_level-right);
+  clip-path: polygon(50% 50%, 1050% -950%, 1050% 1050%);
+}
+
+:host-context([dir=rtl]) .shadow.inline-start,
+:host([dir=rtl]) .shadow.inline-start {
+  clip-path: polygon(50% 50%, 1050% -950%, 1050% 1050%);
+}
+:host-context([dir=rtl]) .shadow.inline-end,
+:host([dir=rtl]) .shadow.inline-end {
+  clip-path: polygon(50% 50%, -950% 1050%, -950% -950%);
 }
 
 .shadow::before,
 .shadow::after {
   content: "";
   transition-property: box-shadow, opacity;
-  --_level: var(--elevation-level);
   --_shadow-color: var(--elevation-color);
 }
 
@@ -83,7 +131,12 @@ var css_248z = i`* {
  */
 let Elevation = class Elevation extends i$1 {
     render() {
-        return b `<span class="shadow"></span>`;
+        return b `
+      <span class="shadow block-start"></span>
+      <span class="shadow block-end"></span>
+      <span class="shadow inline-start"></span>
+      <span class="shadow inline-end"></span>
+    `;
     }
 };
 Elevation.styles = [css_248z];

package/dist/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Elevation\n * @tag wc-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 *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\n@IndividualComponent\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,4BAAA,CAA8B;IAC3C;;AAJO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAMrB;;;;"}
+{"version":3,"file":"elevation.js","sources":["../../src/elevation/elevation.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport styles from './elevation.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Elevation\n * @tag wc-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 *     <wc-elevation style='--elevation-level: 2; --elevation-container-shape: var(--shape-corner-extra-small);'></wc-elevation>\n *     Level 2\n *   </div>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Elevation extends LitElement {\n  static styles = [styles];\n\n  render() {\n    return html`\n      <span class=\"shadow block-start\"></span>\n      <span class=\"shadow block-end\"></span>\n      <span class=\"shadow inline-start\"></span>\n      <span class=\"shadow inline-end\"></span>\n    `;\n  }\n}\n\n\n"],"names":["LitElement","html","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;IAGvC,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;;KAKV;IACH;;AATO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAWrB;;;;"}