@redvars/peacock 3.8.2 → 3.8.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

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.2/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.4/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.2/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.4/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>
@@ -69,7 +69,7 @@ menus, checkboxes, and radio buttons.
 |---------------------------------------------------------------------|-----------------|-------|
 | [Checkbox](https://peacock.redvars.com/components/checkbox)         | wc-checkbox     | 🟢    |
 | [Code editor](https://peacock.redvars.com/components/code-editor)   | wc-code-editor  | 🟢    |
-| Color picker                                                        | color-picker    | 🔴    |
+| [Color picker](https://peacock.redvars.com/components/color-picker) | wc-color-picker | 🟡    |
 | [Date picker](https://peacock.redvars.com/components/date-picker)   | wc-date-picker  | 🟡    |
 | Date time picker                                                    | datetime-picker | 🔴    |
 | [Field / Form control](https://peacock.redvars.com/components/field) | wc-field       | 🟡    |

package/scss/mixin.scss

@@ -1,6 +1,7 @@
 @mixin base-styles {
   * {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
   }
 
   .screen-reader-only {
@@ -25,6 +26,7 @@
   text-decoration: none;
   color: inherit;
   cursor: pointer;
+  outline: none;
 
   &:link,
   &:visited,

package/src/accordion/accordion-item.ts

@@ -20,7 +20,7 @@ import IndividualComponent from '@/IndividualComponent.js';
  * @part description - The description text container.
  * @part content - The expandable content region wrapper.
  *
- * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item-toggle - Fired when the panel is expanded or collapsed.
  *
  * @example
  * ```html
@@ -87,7 +87,7 @@ export class AccordionItem extends LitElement {
     if (this.disabled) return;
     this.open = !this.open;
     this.dispatchEvent(
-      new CustomEvent('accordion-item:toggle', {
+      new CustomEvent('accordion-item-toggle', {
         bubbles: true,
         composed: true,
         detail: { open: this.open },
@@ -136,12 +136,17 @@ export class AccordionItem extends LitElement {
           ?disabled=${this.disabled}
           @click=${this._handleToggle}
         >
-          ${this.togglePosition === 'before' ? this._renderToggleIcon() : nothing}
+          ${this.togglePosition === 'before'
+            ? this._renderToggleIcon()
+            : nothing}
           <span class="header-label">
             <span part="title" class="panel-title">
               <slot
                 name="heading"
-                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasHeadingSlot = v; })}
+                @slotchange=${(e: Event) =>
+                  AccordionItem._onSlotChange(e, v => {
+                    this._hasHeadingSlot = v;
+                  })}
               ></slot>
             </span>
             <span
@@ -151,12 +156,17 @@ export class AccordionItem extends LitElement {
             >
               <slot
                 name="description"
-                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}
+                @slotchange=${(e: Event) =>
+                  AccordionItem._onSlotChange(e, v => {
+                    this._hasDescriptionSlot = v;
+                  })}
               ></slot>
             </span>
           </span>
           <slot name="header-actions" class="header-actions"></slot>
-          ${this.togglePosition === 'after' ? this._renderToggleIcon() : nothing}
+          ${this.togglePosition === 'after'
+            ? this._renderToggleIcon()
+            : nothing}
         </button>
         <div
           id=${`panel-content-${this.#id}`}

package/src/accordion/accordion.scss

@@ -18,10 +18,10 @@
   gap: var(--spacing-100); // 8dp gap between panels
 }
 
-// ─── Flat display mode ───────────────────────────────────────────────────────
+// ─── Flat variant ───────────────────────────────────────────────────────
 // Removes the gap and the per-item border/background — for use inside cards.
 
-:host([display-mode='flat']) {
+:host([variant='flat']) {
   .accordion {
     gap: 0;
   }

package/src/accordion/accordion.ts

@@ -35,15 +35,15 @@ export class Accordion extends LitElement {
    * When `false` (default), expanding one panel collapses all others.
    */
   @property({ type: Boolean, reflect: true })
-  multi = false;
+  multiple = false;
 
   /**
-   * Display mode for the accordion.
+   * Variant for the accordion.
    * `'default'` renders panels with a subtle background on expand and dividers between items.
    * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
    */
-  @property({ type: String, reflect: true, attribute: 'display-mode' })
-  displayMode: 'default' | 'flat' = 'default';
+  @property({ type: String, reflect: true })
+  variant: 'default' | 'flat' = 'default';
 
   @queryAssignedElements({ selector: 'wc-accordion-item' })
   items!: Array<AccordionItem>;
@@ -52,14 +52,14 @@ export class Accordion extends LitElement {
     super.connectedCallback();
     // @ts-ignore
     // eslint-disable-next-line wc/require-listener-teardown
-    this.addEventListener('accordion-item:toggle', this._onItemToggle);
+    this.addEventListener('accordion-item-toggle', this._onItemToggle);
     this.addEventListener('keydown', this._onKeyDown);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     // @ts-ignore
-    this.removeEventListener('accordion-item:toggle', this._onItemToggle);
+    this.removeEventListener('accordion-item-toggle', this._onItemToggle);
     this.removeEventListener('keydown', this._onKeyDown);
   }
 
@@ -69,7 +69,7 @@ export class Accordion extends LitElement {
     // Ignore events from nested accordions — only handle direct children
     if (targetItem.parentElement !== this) return;
 
-    if (!this.multi && targetItem.open) {
+    if (!this.multiple && targetItem.open) {
       this.items.forEach(item => {
         if (item !== targetItem && item.open) {
           // eslint-disable-next-line no-param-reassign

package/src/button/button/button-base.scss

@@ -51,7 +51,6 @@
   padding: 0
     var(--button-container-padding, var(--private-button-container-padding));
   width: 100%;
-  z-index: 0;
 
   .label {
     font-family: var(--font-family-sans) !important;
@@ -63,6 +62,8 @@
 
     --icon-size: var(--button-icon-size, var(--private-button-icon-size));
     --icon-color: var(--private-button-label-text-color);
+    opacity: var(--private-button-label-text-opacity, 1);
+    display: inline-flex;
 
     pointer-events: none;
   }

package/src/button/button/button-layers.scss

@@ -71,7 +71,7 @@
 }
 
 .focus-ring {
-  z-index: 2;
+  z-index: 1;
   pointer-events: none;
 
   --focus-ring-container-shape-start-start: var(
@@ -125,8 +125,6 @@
   inset: 0;
   pointer-events: none;
 
-  z-index: 2;
-
   --skeleton-container-shape-start-start: var(
     --private-button-container-shape-start-start,
     var(--private-button-container-shape)
@@ -180,8 +178,6 @@
   inset: 0;
   pointer-events: none;
 
-  z-index: 0;
-
   border: var(--private-button-outline-width) solid
     var(--private-button-outline-color);
   opacity: var(--private-button-outline-opacity, 1);
@@ -207,5 +203,5 @@
 }
 
 .tooltip {
-  z-index: 3;
+  z-index: 1;
 }

package/src/button/button/button.ts

@@ -100,11 +100,11 @@ export class Button extends mixinBaseButton(
   // ── Properties ───────────────────────────────────────────────────────────
 
   /**
-   * Icon alignment.
-   * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+   * When `true` (default), the icon is placed after the label (trailing).
+   * When `false`, the icon is placed before the label (leading).
    */
   @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
-  trailingIcon = false;
+  trailingIcon = true;
 
   /**
    * Button size.

package/src/button/button-group/button-group.ts

@@ -14,14 +14,14 @@ import { IconButton } from '../icon-button/icon-button.js';
 
  * @example
  * ```html
- * <wc-button-group connected="true">
- *  <wc-icon-button toggle="true" shaped="wide">
+ * <wc-button-group connected>
+ *  <wc-icon-button toggle="true" shape="wide" selected>
  *    <wc-icon name="format_bold"></wc-icon>
  *  </wc-icon-button>
- *  <wc-icon-button toggle="true" shaped="wide">
+ *  <wc-icon-button toggle="true" shape="wide">
  *    <wc-icon name="format_italic"></wc-icon>
  *  </wc-icon-button>
- *  <wc-icon-button toggle="true" shaped="wide">
+ *  <wc-icon-button toggle="true" shape="wide">
  *    <wc-icon name="format_underlined"></wc-icon>
  *  </wc-icon-button>
  * </wc-button-group>

package/src/button/fab/fab.ts

@@ -134,10 +134,6 @@ export class Fab extends mixinBaseButton(
       return;
     }
 
-    if (this.toggle) {
-      this.selected = !this.selected;
-    }
-
     this.focus();
     dispatchActivationClick(this.buttonElement);
   };

package/src/card/card.scss

@@ -13,10 +13,22 @@
   --card-container-shape-end-start: unset;
   --card-container-shape-end-end: unset;
 
-  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
-  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
-  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
-  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
+  --_container-shape-start-start: var(
+    --card-container-shape-start-start,
+    var(--card-container-shape)
+  );
+  --_container-shape-start-end: var(
+    --card-container-shape-start-end,
+    var(--card-container-shape)
+  );
+  --_container-shape-end-start: var(
+    --card-container-shape-end-start,
+    var(--card-container-shape)
+  );
+  --_container-shape-end-end: var(
+    --card-container-shape-end-end,
+    var(--card-container-shape)
+  );
 }
 
 /*
@@ -136,7 +148,8 @@
   corner-shape: var(--_container-corner-shape-variant);
 }
 
-:host([actionable]) {
+:host([actionable]:not([disabled])),
+:host([href]) {
   .focus-ring,
   .ripple {
     display: block;

package/src/code-highlighter/code-highlighter.ts

@@ -2,22 +2,46 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap } from 'lit/directives/class-map.js';
-import pierreDark from '@pierre/theme/pierre-dark';
-import pierreLight from '@pierre/theme/pierre-light';
-
-import prettier from 'prettier/standalone';
-
-import prettierPluginBabel from 'prettier/plugins/babel';
-import prettierPluginHtml from 'prettier/plugins/html';
-import prettierPluginPostcss from 'prettier/plugins/postcss';
-import * as prettierPluginEstree from 'prettier/plugins/estree';
-
-import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
-
+import type { BundledLanguage, ShikiTransformer } from 'shiki';
 import IndividualComponent from '@/IndividualComponent.js';
 import { copyToClipboard } from '@/__internal/utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
+// Module-level promises – Rollup splits each import() specifier into a separate chunk.
+// Caching here prevents parallel loads when multiple instances initialise at the same time.
+let _shiki: Promise<typeof import('shiki')> | null = null;
+let _themes: Promise<
+  [
+    typeof import('@pierre/theme/pierre-dark'),
+    typeof import('@pierre/theme/pierre-light'),
+  ]
+> | null = null;
+let _prettier: Promise<typeof import('prettier/standalone')> | null = null;
+let _pluginBabel: Promise<typeof import('prettier/plugins/babel')> | null =
+  null;
+let _pluginHtml: Promise<typeof import('prettier/plugins/html')> | null = null;
+let _pluginPostcss: Promise<typeof import('prettier/plugins/postcss')> | null =
+  null;
+let _pluginEstree: Promise<typeof import('prettier/plugins/estree')> | null =
+  null;
+
+const loadShiki = () => (_shiki ??= import('shiki'));
+
+const loadThemes = () =>
+  (_themes ??= Promise.all([
+    import('@pierre/theme/pierre-dark'),
+    import('@pierre/theme/pierre-light'),
+  ]));
+
+const loadPrettier = () => (_prettier ??= import('prettier/standalone'));
+const loadPluginBabel = () =>
+  (_pluginBabel ??= import('prettier/plugins/babel'));
+const loadPluginHtml = () => (_pluginHtml ??= import('prettier/plugins/html'));
+const loadPluginPostcss = () =>
+  (_pluginPostcss ??= import('prettier/plugins/postcss'));
+const loadPluginEstree = () =>
+  (_pluginEstree ??= import('prettier/plugins/estree'));
+
 const locale = {
   loading: 'Loading code...',
   copyToClipboard: 'Copy to clipboard',
@@ -109,31 +133,48 @@ export class CodeHighlighter extends LitElement {
 
     codeString = this.decode(codeString);
 
-    // eslint-disable-next-line default-case
-    switch (this.language) {
-      case 'javascript':
-        codeString = await prettier.format(codeString, {
-          parser: 'babel',
-          plugins: [prettierPluginBabel, prettierPluginEstree],
-          bracketSameLine: true,
-          // Helps if you are writing HTML inside template literals
-          htmlWhitespaceSensitivity: 'ignore',
-        });
-        break;
-      case 'html':
-        codeString = await prettier.format(codeString, {
-          parser: 'html',
-          plugins: [prettierPluginHtml],
-          bracketSameLine: true,
-          htmlWhitespaceSensitivity: 'ignore',
-        });
-        break;
-      case 'css':
-        codeString = await prettier.format(codeString, {
-          parser: 'css',
-          plugins: [prettierPluginPostcss],
-        });
-        break;
+    if (this.format !== false) {
+      // eslint-disable-next-line default-case
+      switch (this.language) {
+        case 'javascript': {
+          const [prettier, pluginBabel, pluginEstree] = await Promise.all([
+            loadPrettier(),
+            loadPluginBabel(),
+            loadPluginEstree(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'babel',
+            plugins: [pluginBabel, pluginEstree],
+            bracketSameLine: true,
+            htmlWhitespaceSensitivity: 'ignore',
+          });
+          break;
+        }
+        case 'html': {
+          const [prettier, pluginHtml] = await Promise.all([
+            loadPrettier(),
+            loadPluginHtml(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'html',
+            plugins: [pluginHtml],
+            bracketSameLine: true,
+            htmlWhitespaceSensitivity: 'ignore',
+          });
+          break;
+        }
+        case 'css': {
+          const [prettier, pluginPostcss] = await Promise.all([
+            loadPrettier(),
+            loadPluginPostcss(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'css',
+            plugins: [pluginPostcss],
+          });
+          break;
+        }
+      }
     }
 
     this.parsedCode = codeString;
@@ -152,6 +193,11 @@ export class CodeHighlighter extends LitElement {
       });
     }
 
+    const [
+      { codeToHtml },
+      [{ default: pierreDark }, { default: pierreLight }],
+    ] = await Promise.all([loadShiki(), loadThemes()]);
+
     this.compiledCode = await codeToHtml(codeString, {
       lang: this.language,
       themes: {
@@ -164,8 +210,17 @@ export class CodeHighlighter extends LitElement {
     });
   }
 
-  protected updated() {
-    this.__highlightCode();
+  protected updated(changed: Map<PropertyKey, unknown>) {
+    // Only re-highlight when the source content or rendering options change,
+    // not on unrelated state updates like the copy-button feedback toggle.
+    if (
+      changed.has('value') ||
+      changed.has('language') ||
+      changed.has('lineNumbers') ||
+      changed.has('format')
+    ) {
+      this.__highlightCode();
+    }
   }
 
   private async __handleCopyClick() {

package/src/color-picker/color-picker.scss

@@ -0,0 +1,217 @@
+:host {
+  --_sv-height: var(--color-picker-sv-height, 160px);
+  --_thumb-size: 16px;
+  --_track-height: 12px;
+  --_preview-size: 40px;
+  --_radius: 6px;
+
+  display: inline-block;
+  width: var(--color-picker-width, 240px);
+  touch-action: none;
+}
+
+.color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 0.5rem);
+
+  &.disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+// ── SV panel ──────────────────────────────────────────────────────────────────
+
+.sv-panel {
+  position: relative;
+  width: 100%;
+  height: var(--_sv-height);
+  border-radius: var(--_radius);
+  // White-to-hue horizontal gradient, black overlay going downward
+  background:
+    linear-gradient(to bottom, transparent 0%, #000 100%),
+    linear-gradient(to right, #fff 0%, var(--hue-color) 100%);
+  cursor: crosshair;
+  user-select: none;
+  overflow: hidden;
+}
+
+.sv-cursor {
+  position: absolute;
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  outline: none;
+  cursor: crosshair;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
+  }
+}
+
+// ── Controls row (preview + sliders) ─────────────────────────────────────────
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-200, 1rem);
+}
+
+.color-preview {
+  width: var(--_preview-size);
+  height: var(--_preview-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
+  // Checkerboard backdrop (visible through transparent colors)
+  background: repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+
+.preview-inner {
+  width: 100%;
+  height: 100%;
+}
+
+.sliders {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 0.5rem);
+}
+
+// ── Slider tracks ─────────────────────────────────────────────────────────────
+
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--_track-height);
+  border-radius: calc(var(--_track-height) / 2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.hue-track {
+  background: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+}
+
+.alpha-track {
+  // Color gradient over checkerboard
+  background:
+    linear-gradient(to right, transparent, var(--current-color, currentColor)),
+    repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+}
+
+// ── Slider thumb ──────────────────────────────────────────────────────────────
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  outline: none;
+  transition: box-shadow 0.15s ease;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
+  }
+
+  &:active {
+    cursor: grabbing;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+}
+
+// ── Inputs row ────────────────────────────────────────────────────────────────
+
+.inputs-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+}
+
+.hex-input-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--spacing-050, 0.25rem);
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--color-outline-variant, #ccc);
+  border-radius: var(--_radius);
+  background: var(--color-surface-container-high, #ece6f0);
+}
+
+.hex-prefix {
+  color: var(--color-on-surface-variant, #666);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.input-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-on-surface-variant, #666);
+  flex-shrink: 0;
+}
+
+.hex-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-family: var(--typography-mono-font-family, monospace);
+  color: var(--color-on-surface, #333);
+}
+
+.alpha-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050, 0.25rem);
+  height: 32px;
+  padding: 0 8px;
+  width: 64px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-outline-variant, #ccc);
+  border-radius: var(--_radius);
+  background: var(--color-surface-container-high, #ece6f0);
+}
+
+.alpha-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  color: var(--color-on-surface, #333);
+
+  // Hide browser spin buttons
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    appearance: none;
+  }
+
+  appearance: textfield;
+}