@redvars/peacock 3.8.5 → 3.9.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.5",
+  "version": "3.9.0",
   "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.5/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.5/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.9.0/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

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/index.ts

@@ -42,11 +42,13 @@ export { Popover, PopoverContent } from './popover/index.js';
 export { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
 export { Menu, MenuItem, SubMenu } from './menu/index.js';
 export { List, ListItem } from './list/index.js';
+export { Timeline, TimelineItem } from './timeline/index.js';
 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

@@ -34,6 +34,8 @@ import { SubMenu } from '@/menu/sub-menu/sub-menu.js';
 import { Item } from '@/item/item.js';
 import { List } from '@/list/list.js';
 import { ListItem } from '@/list/list-item.js';
+import { Timeline } from '@/timeline/timeline.js';
+import { TimelineItem } from '@/timeline/timeline-item.js';
 
 import { Accordion } from '@/accordion/accordion.js';
 import { Link } from '@/link/link.js';
@@ -262,6 +264,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`,
     },
@@ -301,6 +307,12 @@ const loaderConfig: LoaderConfig = {
     'wc-list-item': {
       CustomElementClass: ListItem,
     },
+    'wc-timeline': {
+      CustomElementClass: Timeline,
+    },
+    'wc-timeline-item': {
+      CustomElementClass: TimelineItem,
+    },
     'wc-item': {
       CustomElementClass: Item,
     },

package/src/markdown-editor/index.ts

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