@redvars/peacock 3.8.6 → 3.9.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.6",
+  "version": "3.9.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,9 +32,10 @@
     "analyze": "cem analyze --config \"./custom-elements-manifest.config.mjs\" && node bin/typedoc-gen.mjs",
     "start": "rollup -c && concurrently -k -r \"rollup -c -w\" \"web-dev-server\"",
     "start:for-docs": "rollup -c -w",
-    "build": "npm run build:lit && npm run analyze -- --exclude dist && npm run build:scss",
+    "build": "npm run build:lit && npm run analyze -- --exclude dist && npm run build:scss && npm run publish:docs",
     "build:lit": "rollup -c",
     "build:scss": "node ./bin/scss-build.mjs",
+    "publish:docs": "node ./bin/docs-publish.mjs",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "prepare": "husky",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.1/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/code-highlighter/code-highlighter.scss

@@ -2,7 +2,6 @@
 
 @include mixin.base-styles;
 
-
 :host {
   display: block;
   height: 100%;
@@ -32,7 +31,7 @@
     align-items: center;
     justify-content: space-between;
     background-color: var(--code-highlighter-background);
-    margin-bottom: var(--spacing-050);
+    border-bottom: 1px solid var(--color-outline-variant);
 
     @include mixin.get-typography(body-medium);
 
@@ -41,18 +40,15 @@
     }
   }
 
-
   .scroll-wrapper {
     flex: 1;
     overflow-y: auto;
     background-color: var(--code-highlighter-background);
 
-
     .highlighter {
       margin: 0;
       position: relative;
 
-
       .shiki {
         margin: 0;
         padding: var(--spacing-200);
@@ -69,8 +65,6 @@
   }
 
   &.line-numbers {
-    margin-left: 3.75rem;
-
     .highlighter .shiki {
       /* Reset counter for line numbers */
       counter-reset: line-counter;

package/src/elevation/demo/index.html

@@ -48,6 +48,58 @@
   Level 5
 </div>
 
+<h2>Selective Shade Hiding (Level 3 shadow)</h2>
+<div style="display: flex; gap: var(--spacing-400); flex-wrap: wrap; margin-block: var(--spacing-400);">
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-block-start: 0;"></p-elevation>
+    Hide Top
+  </div>
+
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-block-end: 0;"></p-elevation>
+    Hide Bottom
+  </div>
+
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-inline-start: 0;"></p-elevation>
+    Hide Start (Left)
+  </div>
+
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-inline-end: 0;"></p-elevation>
+    Hide End (Right)
+  </div>
+</div>
+
+<h3>RTL Direction (Hide Start should be Right, Hide End should be Left)</h3>
+<div dir="rtl" style="display: flex; gap: var(--spacing-400); flex-wrap: wrap; margin-block: var(--spacing-400);">
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-inline-start: 0;"></p-elevation>
+    Hide Start (Right in RTL)
+  </div>
+
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level: 3; --elevation-level-inline-end: 0;"></p-elevation>
+    Hide End (Left in RTL)
+  </div>
+</div>
+
+<h2>Multi-level Selective Shading (Different levels per side)</h2>
+<div style="display: flex; gap: var(--spacing-400); flex-wrap: wrap; margin-block: var(--spacing-400);">
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level-block-start: 4; --elevation-level-block-end: 1; --elevation-level-inline-start: 2; --elevation-level-inline-end: 5;"></p-elevation>
+    Top 4, Bottom 1, Left 2, Right 5
+  </div>
+
+  <div class="elevated-element">
+    <p-elevation style="--elevation-level-block-start: 5;"></p-elevation>
+    Top 5, others unset (0)
+  </div>
+</div>
+
+
+
+
 
 
 <script type='module'>

package/src/elevation/elevation.scss

@@ -30,6 +30,57 @@
   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"]),
+:host([dir="rtl"]) {
+  .shadow.inline-start {
+    clip-path: polygon(50% 50%, 1050% -950%, 1050% 1050%);
+  }
+  .shadow.inline-end {
+    clip-path: polygon(50% 50%, -950% 1050%, -950% -950%);
+  }
 }
 
 .shadow::before,
@@ -37,11 +88,7 @@
   content: '';
   transition-property: box-shadow, opacity;
 
-  // Elevation doesn't share styles with multiple variants, so we normally
-  // would not use private custom properties. However, these variables are
-  // repeated several times in the styles below, and a shorter custom property
-  // reduces the CSS size, minified and gzip.
-  --_level: var(--elevation-level);
+  // --_level is inherited from .shadow
   --_shadow-color: var(--elevation-color);
 }
 

package/src/elevation/elevation.ts

@@ -29,6 +29,13 @@ export class Elevation extends LitElement {
   static styles = [styles];
 
   render() {
-    return html`<span class="shadow"></span>`;
+    return html`
+      <span class="shadow block-start"></span>
+      <span class="shadow block-end"></span>
+      <span class="shadow inline-start"></span>
+      <span class="shadow inline-end"></span>
+    `;
   }
 }
+
+

package/src/flow/flow.scss

@@ -0,0 +1,195 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  --flow-background: var(--color-surface-container-lowest, #f4f5f8);
+  --flow-dot-color: var(--color-outline-variant, #e1e3e8);
+  --flow-line-color: var(--color-outline, #75777c);
+  --flow-hover-color: var(--color-primary, #005FAF);
+  --flow-node-bg: var(--color-surface-container-low, #f8f9fc);
+  --flow-node-border: var(--color-outline-variant, #c5c6cb);
+  --flow-node-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  --flow-node-active-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.flow-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--flow-background);
+  border: 1px solid var(--color-outline-variant);
+  border-radius: 16px;
+  overflow: auto;
+}
+
+.flow-workspace {
+  position: relative;
+}
+
+.flow-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+}
+
+#dot-grid circle {
+  fill: var(--flow-dot-color);
+}
+
+// --- Edges ---
+.flow-edge {
+  transition: stroke 150ms ease, stroke-width 150ms ease;
+  pointer-events: stroke;
+  cursor: pointer;
+
+  &:hover {
+    stroke: var(--flow-hover-color);
+    stroke-width: 3;
+  }
+
+  &.variant-dashed {
+    stroke-dasharray: 5 5;
+  }
+
+  &.variant-animated-dashed {
+    stroke-dasharray: 5 5;
+    animation: flow-dash-flow 1s linear infinite;
+  }
+}
+
+.flow-edge-preview {
+  stroke-dasharray: 5 5;
+  animation: flow-dash-flow 1s linear infinite;
+  pointer-events: none;
+}
+
+// --- Nodes ---
+.flow-nodes {
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+.flow-node {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--flow-node-bg);
+  border: 1px solid var(--flow-node-border);
+  box-shadow: var(--flow-node-shadow);
+  border-radius: 12px;
+  min-width: 150px;
+  min-height: 70px;
+  cursor: grab;
+  user-select: none;
+  z-index: 5;
+  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
+
+  &:active {
+    cursor: grabbing;
+    box-shadow: var(--flow-node-active-shadow);
+    border-color: var(--flow-hover-color);
+    transform: translateY(-1px);
+  }
+}
+
+.flow-node-content {
+  width: 100%;
+  height: 100%;
+  padding: 12px 16px;
+}
+
+// --- Default Node Card Design ---
+.flow-node-default-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+.flow-node-title {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-on-surface);
+}
+
+// --- Sockets / Handles ---
+.handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--color-surface, #ffffff);
+  border: 2px solid var(--color-outline, #75777c);
+  z-index: 10;
+  cursor: crosshair;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
+              background-color 150ms ease,
+              border-color 150ms ease,
+              box-shadow 150ms ease;
+
+  &:hover {
+    transform: scale(1.4);
+    background-color: var(--flow-hover-color);
+    border-color: var(--flow-hover-color);
+    box-shadow: 0 0 8px rgba(0, 95, 175, 0.5);
+  }
+
+  &:active {
+    transform: scale(1.2);
+    background-color: var(--flow-hover-color);
+    border-color: var(--flow-hover-color);
+  }
+}
+
+.handle-position-left {
+  left: -7px;
+  top: calc(50% - 6px);
+}
+
+.handle-position-right {
+  right: -7px;
+  top: calc(50% - 6px);
+}
+
+.handle-position-top {
+  top: -7px;
+  left: calc(50% - 6px);
+}
+
+.handle-position-bottom {
+  bottom: -7px;
+  left: calc(50% - 6px);
+}
+
+// --- Animations ---
+@keyframes flow-dash-flow {
+  to {
+    stroke-dashoffset: -20;
+  }
+}
+
+.flow-node-custom {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+
+  .flow-node-content {
+    padding: 0 !important;
+  }
+}