@redvars/peacock 3.8.4 → 3.8.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -50,13 +50,16 @@
     "@tiptap/extension-underline": "^2.11.3",
     "@tiptap/pm": "^2.11.3",
     "@tiptap/starter-kit": "^2.11.3",
+    "@tiptap/suggestion": "^2.11.3",
     "@types/prettier": "^3.0.0",
     "d3": "^7.9.0",
     "install": "^0.13.0",
     "js-beautify": "^1.15.4",
     "lit": "^3.1.4",
+    "marked": "^14.1.3",
     "modern-monaco": "^0.4.0",
     "monaco-editor": "^0.55.1",
+    "turndown": "^7.2.0",
     "npm": "^11.11.0",
     "prettier": "^3.8.1",
     "rollup-plugin-postcss": "^4.0.2",
@@ -75,6 +78,7 @@
     "@types/js-beautify": "^1.14.3",
     "@types/mocha": "^10.0.7",
     "@types/prismjs": "^1.26.6",
+    "@types/turndown": "^5.0.5",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@wc-toolkit/jsdoc-tags": "^1.1.0",

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.4/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.4/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.6/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/accordion/accordion-item.scss

@@ -13,7 +13,10 @@
 .expansion-panel {
   border: var(--_accordion-item-border, 1px solid var(--color-outline-variant));
   border-radius: var(--shape-corner-medium); // 12dp — M3 medium shape
-  background-color: var(--_accordion-item-background, var(--color-surface-container-low));
+  background-color: var(
+    --_accordion-item-background,
+    var(--color-surface-container-low)
+  );
   overflow: hidden; // clip children to border-radius
   transition:
     background-color var(--duration-medium1) var(--easing-standard),
@@ -24,6 +27,7 @@
   .header-button {
     position: relative;
     display: flex;
+    flex-direction: row-reverse;
     align-items: center;
     width: 100%;
     min-height: 3rem; // 48dp — grows with description
@@ -62,6 +66,11 @@
     }
   }
 
+  .header-content {
+    display: flex;
+    flex: 1;
+  }
+
   // ─── Header Label (title + description column) ──────────────────────────────
 
   .header-label {
@@ -117,7 +126,8 @@
   .panel-content {
     display: grid;
     grid-template-rows: 0fr;
-    transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+    transition: grid-template-rows var(--duration-medium1)
+      var(--easing-standard);
   }
 
   .content-inner {
@@ -130,8 +140,16 @@
   // ─── Disabled State ─────────────────────────────────────────────────────────
 
   &.disabled {
-    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
-    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--color-surface-container-low) 38%,
+      transparent
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--color-outline-variant) 38%,
+      transparent
+    );
 
     .header-button {
       cursor: not-allowed;
@@ -163,20 +181,24 @@
   // ─── Disabled State (border + bg dimmed) ────────────────────────────────────
 
   &.disabled {
-    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
-    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--color-surface-container-low) 38%,
+      transparent
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--color-outline-variant) 38%,
+      transparent
+    );
   }
 }
 
 // ─── Toggle position: before ─────────────────────────────────────────────────
 
-:host([toggle-position='before']) {
+:host-context([leading-toggle]) {
   .header-button {
-    flex-direction: row-reverse;
+    flex-direction: row;
     justify-content: flex-end;
   }
-
-  .header-label {
-    flex: 1;
-  }
 }

package/src/accordion/accordion-item.ts

@@ -56,14 +56,6 @@ export class AccordionItem extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
   hideToggle: boolean = false;
 
-  /**
-   * Position of the toggle icon relative to the panel title.
-   * `'after'` places it at the trailing end (default, matches M3).
-   * `'before'` places it at the leading start.
-   */
-  @property({ type: String, reflect: true, attribute: 'toggle-position' })
-  togglePosition: 'before' | 'after' = 'after';
-
   /** True when the `description` slot contains at least one non-empty node. */
   @state()
   private _hasDescriptionSlot = false;
@@ -136,37 +128,34 @@ export class AccordionItem extends LitElement {
           ?disabled=${this.disabled}
           @click=${this._handleToggle}
         >
-          ${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;
-                  })}
-              ></slot>
+          ${this._renderToggleIcon()}
+          <div class="header-content">
+            <span class="header-label">
+              <span part="title" class="panel-title">
+                <slot
+                  name="heading"
+                  @slotchange=${(e: Event) =>
+                    AccordionItem._onSlotChange(e, v => {
+                      this._hasHeadingSlot = v;
+                    })}
+                ></slot>
+              </span>
+              <span
+                part="description"
+                class="panel-description"
+                ?hidden=${!this._hasDescriptionSlot}
+              >
+                <slot
+                  name="description"
+                  @slotchange=${(e: Event) =>
+                    AccordionItem._onSlotChange(e, v => {
+                      this._hasDescriptionSlot = v;
+                    })}
+                ></slot>
+              </span>
             </span>
-            <span
-              part="description"
-              class="panel-description"
-              ?hidden=${!this._hasDescriptionSlot}
-            >
-              <slot
-                name="description"
-                @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}
+            <slot name="header-actions" class="header-actions"></slot>
+          </div>
         </button>
         <div
           id=${`panel-content-${this.#id}`}

package/src/accordion/accordion.ts

@@ -45,6 +45,13 @@ export class Accordion extends LitElement {
   @property({ type: String, reflect: true })
   variant: 'default' | 'flat' = 'default';
 
+  /**
+   * When `true`, the toggle icon is placed at the leading start of the header.
+   * When `false` (default), the icon is placed at the trailing end.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'leading-toggle' })
+  leadingToggle = false;
+
   @queryAssignedElements({ selector: 'wc-accordion-item' })
   items!: Array<AccordionItem>;
 

package/src/button/button/button-sizes.scss

@@ -5,6 +5,7 @@
   --button-height: 2rem;
   --private-button-icon-size: 1rem;
   --private-button-container-padding: 0.75rem;
+  --private-button-icon-label-spacing: 0.5rem;
 
   --private-button-font-size: 0.875rem !important;
   --private-button-font-weight: var(--font-weight-medium) !important;
@@ -30,6 +31,7 @@
   --button-height: 3.5rem;
   --private-button-icon-size: 1.5rem;
   --private-button-container-padding: 1.5rem;
+  --private-button-icon-label-spacing: 0.5rem;
 
   --private-button-font-size: 1rem !important;
   --private-button-font-weight: var(--font-weight-medium) !important;
@@ -42,6 +44,7 @@
   --button-height: 6rem;
   --private-button-icon-size: 2rem;
   --private-button-container-padding: 3rem;
+  --private-button-icon-label-spacing: 0.75rem;
 
   --private-button-font-size: 1.5rem !important;
   --private-button-font-weight: var(--font-weight-regular) !important;
@@ -54,6 +57,7 @@
   --button-height: 8.5rem;
   --private-button-icon-size: 2.5rem;
   --private-button-container-padding: 4rem;
+  --private-button-icon-label-spacing: 1rem;
 
   --private-button-font-size: 2rem !important;
   --private-button-font-weight: var(--font-weight-regular) !important;

package/src/button/button/button.ts

@@ -44,30 +44,30 @@ export type {
  * @overview
  * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
  *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
+ * @cssprop --button-container-shape - Defines the border radius of the button container shape.
  *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.
  *
  *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
+ * @cssprop --filled-button-container-color - Color of the filled button container.
+ * @cssprop --filled-button-label-text-color - Text color of the filled button label.
  *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
+ * @cssprop --outlined-button-container-color - Color of the outlined button container.
+ * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.
  *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
+ * @cssprop --text-button-label-text-color - Text color of the text button label.
  *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
+ * @cssprop --tonal-button-container-color - Color of the tonal button container.
+ * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.
  *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
+ * @cssprop --elevated-button-container-color - Color of the elevated button container.
+ * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.
  *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
+ * @cssprop --neo-button-container-color - Color of the neo button container.
+ * @cssprop --neo-button-label-text-color - Text color of the neo button label.
  *
  * @fires {MouseEvent} click - Dispatched when the button is clicked.
  *
@@ -104,7 +104,7 @@ export class Button extends mixinBaseButton(
    * When `false`, the icon is placed before the label (leading).
    */
   @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
-  trailingIcon = true;
+  trailingIcon = false;
 
   /**
    * Button size.

package/src/index.ts

@@ -47,6 +47,7 @@ export { Item } from './item/index.js';
 export { CodeHighlighter } from './code-highlighter/index.js';
 export { CodeEditor } from './code-editor/index.js';
 export { HtmlEditor } from './html-editor/index.js';
+export { MarkdownEditor } from './markdown-editor/index.js';
 export { Image } from './image/index.js';
 export { Svg } from './svg/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';

package/src/input/input.ts

@@ -1,11 +1,11 @@
-import { html, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
 
-import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
-import { spread } from '@/__internal/directive/spread.js';
+import { redispatchEvent } from "@/__internal/utils/dispatch-event-utils.js";
+import { spread } from "@/__internal/directive/spread.js";
 
-import BaseInput from './BaseInput.js';
-import styles from './input.scss';
+import BaseInput from "./BaseInput.js";
+import styles from "./input.scss";
 
 /**
  * @label Input
@@ -23,46 +23,52 @@ export class Input extends BaseInput {
   static styles = [styles];
 
   @property({ type: String })
-  value = '';
+  value = "";
 
   @property({ type: String })
-  name: string = '';
+  name: string = "";
 
-  @property({ type: String }) placeholder = '';
+  @property({ type: String })
+  placeholder = "";
 
-  @property({ type: String }) label = '';
+  @property({ type: String })
+  label = "";
 
-  @property({ type: Boolean, reflect: true }) inline = false;
+  @property({ type: Boolean, reflect: true })
+  inline = false;
 
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: String, reflect: true })
+  size: "sm" | "md" | "lg" = "md";
 
-  @property({ type: String }) type: 'text' | 'password' | 'email' | 'tel' =
-    'text';
+  @property({ type: String })
+  type: "text" | "password" | "email" | "tel" = "text";
 
-  @property({ type: String }) autocomplete: 'on' | 'off' = 'off';
+  @property({ type: String })
+  autocomplete: "on" | "off" = "off";
 
-  @property({ type: Object }) configAria: Record<string, string> = {};
+  @property({ type: Object })
+  configAria: Record<string, string> = {};
 
   @property({ type: String })
-  variant: 'filled' | 'outlined' | 'default' = 'default';
+  variant: "filled" | "outlined" | "default" = "default";
 
   /**
    * Helper text to display below the input.
    */
-  @property({ type: String, attribute: 'helper-text' })
-  helperText: string = '';
+  @property({ type: String, attribute: "helper-text" })
+  helperText: string = "";
 
   @property({ type: Boolean })
   error: boolean = false;
 
-  @property({ type: String, attribute: 'error-text' })
-  errorText: string = '';
+  @property({ type: String, attribute: "error-text" })
+  errorText: string = "";
 
   @property({ type: Boolean })
   warning: boolean = false;
 
-  @property({ type: String, attribute: 'warning-text' })
-  warningText: string = '';
+  @property({ type: String, attribute: "warning-text" })
+  warningText: string = "";
 
   @state()
   private focused = false;
@@ -74,15 +80,16 @@ export class Input extends BaseInput {
    * Returns true when the text field has been interacted with. Native
    * validation errors only display in response to user interactions.
    */
-  @state() private dirty = false;
+  @state()
+  private dirty = false;
 
-  @query('.input-element')
+  @query(".input-element")
   private inputElement?: HTMLInputElement;
 
   override async focus() {
     await Promise.all([
-      customElements.whenDefined('wc-input'),
-      customElements.whenDefined('wc-field'),
+      customElements.whenDefined("wc-input"),
+      customElements.whenDefined("wc-field"),
     ]);
     await this.updateComplete;
     this.inputElement?.focus();
@@ -94,8 +101,8 @@ export class Input extends BaseInput {
   }
 
   private handleInitialAttributes() {
-    Array.from(this.attributes).forEach(attr => {
-      if (attr.name.startsWith('aria-')) {
+    Array.from(this.attributes).forEach((attr) => {
+      if (attr.name.startsWith("aria-")) {
         this.configAria[attr.name] = attr.value;
         this.removeAttribute(attr.name);
       }
@@ -108,7 +115,7 @@ export class Input extends BaseInput {
   }
 
   private __handleFocusChange = (event: FocusEvent) => {
-    this.focused = event.type === 'focus';
+    this.focused = event.type === "focus";
   };
 
   private __redispatchEvent(event: Event) {
@@ -116,72 +123,68 @@ export class Input extends BaseInput {
   }
 
   render() {
-    const displayType =
-      this.type === 'password' && this.passwordVisible ? 'text' : this.type;
+    const displayType = this.type === "password" && this.passwordVisible
+      ? "text"
+      : this.type;
 
     return html`
       <wc-field
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?skeleton=${this.skeleton}
-        helper-text=${this.helperText}
-        ?error=${this.error}
-        error-text=${this.errorText}
-        ?warning=${this.warning}
-        variant=${this.variant}
-        ?populated=${!!this.value}
-        warning-text=${this.warningText}
-        label=${this.label}
-        ?focused=${this.focused}
-        .host=${this}
+        ?required="${this.required}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        ?skeleton="${this.skeleton}"
+        helper-text="${this.helperText}"
+        ?error="${this.error}"
+        error-text="${this.errorText}"
+        ?warning="${this.warning}"
+        variant="${this.variant}"
+        ?populated="${!!this.value}"
+        warning-text="${this.warningText}"
+        label="${this.label}"
+        ?focused="${this.focused}"
+        .host="${this}"
         class="input-wrapper"
       >
         <slot name="start" slot="field-start"></slot>
 
         <input
           class="input input-element"
-          name=${this.name}
-          type=${displayType}
-          placeholder=${this.placeholder}
-          autocomplete=${this.autocomplete}
-          .value=${this.value}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          ?disabled=${this.disabled}
-          @input=${this.__handleInput}
-          @change=${this.__redispatchEvent}
-          @focus=${this.__handleFocusChange}
-          @blur=${this.__handleFocusChange}
+          name="${this.name}"
+          type="${displayType}"
+          placeholder="${this.placeholder}"
+          autocomplete="${this.autocomplete}"
+          .value="${this.value}"
+          ?readonly="${this.readonly}"
+          ?required="${this.required}"
+          ?disabled="${this.disabled}"
+          @input="${this.__handleInput}"
+          @change="${this.__redispatchEvent}"
+          @focus="${this.__handleFocusChange}"
+          @blur="${this.__handleFocusChange}"
           ${spread(this.configAria)}
         />
 
-        ${this.type === 'password'
+        <slot name="end" slot="field-end"></slot>
+
+        ${this.type === "password"
           ? html`
-              <wc-tooltip
-                slot="field-end"
-                content=${this.passwordVisible
-                  ? 'Hide password'
-                  : 'Show password'}
-              >
-                <wc-icon-button
-                  class="password-toggle"
-                  variant="text"
-                  @click=${() => {
-                    this.passwordVisible = !this.passwordVisible;
-                  }}
-                >
-                  <wc-icon
-                    name=${this.passwordVisible
-                      ? 'visibility_off'
-                      : 'visibility'}
-                  ></wc-icon>
-                </wc-icon-button>
-              </wc-tooltip>
-            `
+            <wc-icon-button
+              class="password-toggle"
+              variant="text"
+              slot="field-end"
+              tooltip="${this.passwordVisible
+                ? "Hide password"
+                : "Show password"}"
+              @click="${() => {
+                this.passwordVisible = !this.passwordVisible;
+              }}"
+            >
+              <wc-icon
+                name="${this.passwordVisible ? "visibility_off" : "visibility"}"
+              ></wc-icon>
+            </wc-icon-button>
+          `
           : nothing}
-
-        <slot name="end" slot="field-end"></slot>
       </wc-field>
     `;
   }

package/src/loader.ts

@@ -262,6 +262,10 @@ const loaderConfig: LoaderConfig = {
       importPath: `${distDirectory}/html-editor.js`,
       dependencies: ['wc-code-editor'],
     },
+    'wc-markdown-editor': {
+      importPath: `${distDirectory}/markdown-editor.js`,
+      dependencies: ['wc-code-editor'],
+    },
     'wc-code-highlighter': {
       importPath: `${distDirectory}/code-highlighter.js`,
     },

package/src/markdown-editor/index.ts

@@ -0,0 +1,3 @@
+import { MarkdownEditor } from './markdown-editor.js';
+
+export { MarkdownEditor };