@redvars/peacock 3.8.1 → 3.8.3

package/src/checkbox/checkbox.ts

@@ -1,8 +1,9 @@
-import { html, LitElement, svg } from 'lit';
+import { html, LitElement, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '@/__directive/spread.js';
+import { spread } from '@/__internal/directive/spread.js';
 import styles from './checkbox.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Checkbox
@@ -11,7 +12,7 @@ import styles from './checkbox.scss';
  * @summary Captures boolean input with an optional indeterminate mode.
  * @overview
  * <p>Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.</p>
- * <p>Material Design 3 checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
+ * <p>checkboxes feature a smooth animation and clear visual states for checked, unchecked, and indeterminate.</p>
  * @cssprop --checkbox-size: Size of the checkbox container.
  * @cssprop --checkbox-selected-color: Color of the checkbox when selected.
  * @cssprop --checkbox-unselected-color: Color of the checkbox border when unselected.
@@ -27,6 +28,7 @@ import styles from './checkbox.scss';
  * <wc-checkbox label="Accept terms"></wc-checkbox>
  * ```
  */
+@IndividualComponent
 export class Checkbox extends LitElement {
   static styles = [styles];
 
@@ -91,12 +93,15 @@ export class Checkbox extends LitElement {
   @property({ type: Object })
   configAria: Record<string, string> = {};
 
+  /** True while the checkbox container has keyboard focus. */
   @state()
   private hasFocus = false;
 
+  /** True while the user is actively pressing the checkbox (mouse/keyboard). */
   @state()
   private isActive = false;
 
+  /** True when slotted label content is present. */
   @state()
   private slotHasContent = false;
 
@@ -106,6 +111,9 @@ export class Checkbox extends LitElement {
   @query('.input-native')
   private nativeElement?: HTMLInputElement;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Captured `tabindex` attribute value forwarded to the inner container. */
   private tabindex?: string;
 
   connectedCallback() {
@@ -257,7 +265,7 @@ export class Checkbox extends LitElement {
           ${spread(this.configAria)}
         >
           <wc-ripple class="ripple"></wc-ripple>
-          <wc-focus-ring class="focus-ring" for='container'></wc-focus-ring>
+          <wc-focus-ring class="focus-ring" for="container"></wc-focus-ring>
           <div class="outline"></div>
           <div class="background"></div>
           <svg class="icon" viewBox="0 0 12 12">

package/src/chip/chip/chip.scss

@@ -165,7 +165,7 @@
   --_chip-state-opacity: 0.08;
 }
 
-:host([pressed]) {
+:host(:active) {
   --_chip-state-opacity: 0.12;
 }
 

package/src/chip/chip/chip.ts

@@ -2,18 +2,22 @@ import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
 import {
   dispatchActivationClick,
   isActivationClick,
-} from '@/__utils/dispatch-event-utils.js';
-import { isLink } from '@/__utils/is-link.js';
+} from '@/__internal/utils/dispatch-event-utils.js';
+import { isLink } from '@/__internal/utils/is-link.js';
+import { throttle } from '@/__internal/utils/throttle.js';
 import styles from './chip.scss';
 import sizeStyles from './chip-sizes.scss';
-import { spread } from '@/__directive/spread.js';
+import { spread } from '@/__internal/directive/spread.js';
 import { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';
-import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import { mixinBaseButton } from '@/button/base-button/base-button.js';
+import { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
 
 /**
  * @label Chip
@@ -27,7 +31,16 @@ import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
+@IndividualComponent
+export class Chip extends mixinBaseButton(
+  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),
+) {
+  /** @nocollapse */ // eslint-disable-next-line
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
+
   // Define styles (Lit handles Scoping via Shadow DOM by default)
   // You would typically import your tag.scss.js here or use the css tag
   static styles = [styles, sizeStyles];
@@ -41,53 +54,30 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
   @property({ reflect: true })
   configAria?: { [key: string]: any };
 
+  /** True when the `icon` slot contains at least one node. */
   @state() private _hasIconSlotContent = false;
 
+  /** When true, renders the chip in a loading skeleton state. */
   @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
-
+  /** When true, the chip is in the selected/pressed state. */
   @property({ type: Boolean, reflect: true }) selected: boolean = false;
 
   /**
-   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.
    */
-  @property() throttleDelay = 200;
+  @property() throttleDelay?: number;
 
+  /** Optional tooltip text displayed on hover. */
   @property() tooltip?: string;
 
-  @property({ type: Boolean, reflect: true })
-  pressed = false;
-
   @query('.button') readonly buttonElement!: HTMLElement | null;
 
-  override connectedCallback() {
-    super.connectedCallback();
+  constructor() {
+    super();
     this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
-  }
-
-  override disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
-    super.disconnectedCallback();
   }
 
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled || this.skeleton || this.softDisabled) return;
-    if (
-      event instanceof KeyboardEvent &&
-      event.type === 'keydown' &&
-      (event.key === 'Enter' || event.key === ' ')
-    ) {
-      this.pressed = true;
-    } else if (event.type === 'mousedown') {
-      this.pressed = true;
-    } else {
-      this.pressed = false;
-    }
-  };
-
   __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
     event => {
       this.__dispatchClick(event);
@@ -107,10 +97,6 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       return;
     }
 
-    if (this.toggle) {
-      this.selected = !this.selected;
-    }
-
     this.focus();
     dispatchActivationClick(this.buttonElement);
   };
@@ -130,7 +116,7 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
 
   __renderTooltip() {
     if (this.tooltip) {
-      return html`<wc-tooltip class="tooltip"  for="button"
+      return html`<wc-tooltip class="tooltip" for="button"
         >${this.tooltip}</wc-tooltip
       >`;
     }
@@ -146,6 +132,12 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
   }
 
   override firstUpdated() {
+    if (typeof this.throttleDelay === 'number') {
+      this.__dispatchClickWithThrottle = throttle(
+        this.__dispatchClick,
+        this.throttleDelay,
+      );
+    }
     observerSlotChangesWithCallback(
       this.renderRoot.querySelector('slot[name="icon"]'),
       hasContent => {
@@ -157,12 +149,10 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
 
   private _dismissClickHandler(e: MouseEvent) {
     e.stopPropagation();
-    const detail = { value: this.value || this.textContent?.trim() };
 
     // Custom Event: tag--dismiss
     this.dispatchEvent(
       new CustomEvent('tag--dismiss', {
-        detail,
         bubbles: true,
         composed: true,
       }),
@@ -201,7 +191,6 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       button: true,
       selected: this.selected,
       dismissible: this.dismissible,
-      pressed: this.pressed,
       'icon-slot-has-content': this._hasIconSlotContent,
     };
 
@@ -209,11 +198,6 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       return html`<button
         class=${classMap(cssClasses)}
         id="button"
-        type=${this.htmlType}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
         aria-describedby=${ifDefined(
           this.softDisabled ? DISABLED_REASON_ID : undefined,
         )}
@@ -230,10 +214,6 @@ export class Chip extends NativeButtonMixin(NativeHyperlinkMixin(LitElement)) {
       href=${this.href}
       target=${this.target}
       tabindex=${this.disabled ? '-1' : '0'}
-      @click=${this.__dispatchClick}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handlePress}
-      @keyup=${this.__handlePress}
       role="button"
       aria-describedby=${ifDefined(
         this.softDisabled ? DISABLED_REASON_ID : undefined,

package/src/chip/demo/index.html

@@ -1,30 +1,34 @@
 <!doctype html>
-<html lang='en-GB'>
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
-  <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">
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <link rel="stylesheet" href="/dist/assets/styles/tokens.css" />
+    <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"
+    />
 
-  <style>
-    body {
-      background: #fafafa;
-    }
-    .text-body {
-      padding: 0;
-      margin: 0 !important;
-    }
-  </style>
-</head>
-<body>
+    <style>
+      body {
+        background: #fafafa;
+      }
+      .text-body {
+        padding: 0;
+        margin: 0 !important;
+      }
+    </style>
+  </head>
+  <body>
+    <p-chip color="red">Link</p-chip>
+    <p-chip color="green">Link</p-chip>
+    <p-chip color="blue">Link</p-chip>
+    <p-chip color="yellow">Link</p-chip>
+    <p-chip color="purple">Link</p-chip>
 
-<p-chip color='red'>Link</p-chip>
-<p-chip color='green'>Link</p-chip>
-<p-chip color='blue'>Link</p-chip>
-<p-chip color='yellow'>Link</p-chip>
-<p-chip color='purple'>Link</p-chip>
-
-
-<script type='module' src='/dist/peacock-loader.js'></script>
-</body>
+    <script type="module" src="/dist/loader.js"></script>
+  </body>
 </html>

package/src/code-editor/code-editor.ts

@@ -1,14 +1,12 @@
 import { html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import {init} from 'modern-monaco';
+import { init } from 'modern-monaco';
 import IndividualComponent from '@/IndividualComponent.js';
 import BaseInput from '../input/BaseInput.js';
-import { observeThemeChange } from '../__utils/observe-theme-change.js';
-import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
-import {
-  isDarkMode,
-} from '@/__utils/is-dark-mode.js';
+import { observeThemeChange } from '../__internal/utils/observe-theme-change.js';
+import { redispatchEvent } from '../__internal/utils/dispatch-event-utils.js';
+import { isDarkMode } from '@/__internal/utils/is-dark-mode.js';
 
 import styles from './code-editor.scss';
 
@@ -32,14 +30,19 @@ import styles from './code-editor.scss';
   getWorkerUrl(moduleId: string, label: string) {
     const workersDir = new URL('monaco/workers/', import.meta.url);
     switch (label) {
-      case 'json':       return `${workersDir}json.worker.js`;
-      case 'css':        return `${workersDir}css.worker.js`;
-      case 'html':       return `${workersDir}html.worker.js`;
+      case 'json':
+        return `${workersDir}json.worker.js`;
+      case 'css':
+        return `${workersDir}css.worker.js`;
+      case 'html':
+        return `${workersDir}html.worker.js`;
       case 'typescript':
-      case 'javascript': return `${workersDir}ts.worker.js`;
-      default:           return `${workersDir}editor.worker.js`;
+      case 'javascript':
+        return `${workersDir}ts.worker.js`;
+      default:
+        return `${workersDir}editor.worker.js`;
     }
-  }
+  },
 };
 
 /**
@@ -67,31 +70,30 @@ import styles from './code-editor.scss';
  */
 @IndividualComponent
 export default class CodeEditor extends BaseInput {
-
   static styles = [styles];
 
-  @property({ type: String }) 
-  name = "";
+  @property({ type: String })
+  name = '';
 
-  @property({ type: String }) 
+  @property({ type: String })
   value = '';
 
-  @property({ type: String }) 
+  @property({ type: String })
   language: 'javascript' | 'json' | 'html' = 'javascript';
 
-  @property({ type: Object }) 
+  @property({ type: Object })
   libSource: any;
 
-  @property({ type: String }) 
+  @property({ type: String })
   lineNumbers: 'off' | 'on' = 'on';
 
-  @property({ type: Boolean }) 
+  @property({ type: Boolean })
   minimap = false;
 
   @state() private _isDarkMode: boolean = isDarkMode();
 
   @state() private hasFocus = false;
-  
+
   // Type the instance correctly using the npm package types
   @state() private editorMonacoInstance?: any;
 
@@ -120,49 +122,48 @@ export default class CodeEditor extends BaseInput {
   protected updated(changedProperties: any) {
     if (changedProperties.has('libSource')) this.libSourceChanged();
 
-    if (changedProperties.has('disabled') || changedProperties.has('readonly')) {
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly')
+    ) {
       this.editorMonacoInstance?.updateOptions({
         readOnly: this.disabled || this.readonly,
       });
     }
 
     if (changedProperties.has('value')) {
-      if (this.editorMonacoInstance && this.editorMonacoInstance.getValue() !== this.value) {
+      if (
+        this.editorMonacoInstance &&
+        this.editorMonacoInstance.getValue() !== this.value
+      ) {
         this.editorMonacoInstance.setValue(this.value || '');
       }
     }
-  } 
-
-
+  }
 
   private libSourceChanged() {
     const libUri = 'java://peacock.redvars.com/lib.java';
     const libModel = this.monaco.editor.getModel(this.monaco.Uri.parse(libUri));
-    
+
     if (libModel) libModel.dispose();
-    
+
     if (this.libSource) {
       this.monaco.editor.createModel(
         this.libSource,
         this.language,
-        this.monaco.Uri.parse(libUri)
+        this.monaco.Uri.parse(libUri),
       );
     }
   }
 
-
   private getTheme() {
     return this._isDarkMode ? 'github-dark' : 'github-light';
   }
 
   async initializeMonaco() {
     this.monaco = await init({
-  themes: [
-    "github-light",
-    "github-dark",
-  ],
-});
-
+      themes: ['github-light', 'github-dark'],
+    });
 
     this.editorMonacoInstance = this.monaco.editor.create(this.editorElement, {
       value: this.value,
@@ -170,11 +171,9 @@ export default class CodeEditor extends BaseInput {
       language: this.language,
       minimap: { enabled: this.minimap },
       theme: this.getTheme(),
-      readOnly: this.disabled || this.readonly
+      readOnly: this.disabled || this.readonly,
     });
 
-
-    
     if (this.libSource) {
       this.libSourceChanged();
     }
@@ -183,7 +182,10 @@ export default class CodeEditor extends BaseInput {
       if (!e.isFlush) {
         const newValue = this.editorMonacoInstance!.getValue();
         this.value = newValue;
-        redispatchEvent(this, new Event('change', { bubbles: true, composed: true }));
+        redispatchEvent(
+          this,
+          new Event('change', { bubbles: true, composed: true }),
+        );
       }
     });
 
@@ -192,18 +194,25 @@ export default class CodeEditor extends BaseInput {
     });
 
     this.editorMonacoInstance.onDidBlurEditorText(() => {
-      this.hasFocus = false
+      this.hasFocus = false;
     });
   }
 
+  async setFocus() {
+    this.editorMonacoInstance?.focus();
+  }
 
-  async setFocus() { this.editorMonacoInstance?.focus(); }
-
-  async setBlur() { this.editorMonacoInstance?.trigger('keyboard', 'type', ''); /* Focus hack or use blur if available */ }
+  async setBlur() {
+    this.editorMonacoInstance?.trigger(
+      'keyboard',
+      'type',
+      '',
+    ); /* Focus hack or use blur if available */
+  }
 
   render() {
     return html`
-    <wc-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -211,21 +220,22 @@ export default class CodeEditor extends BaseInput {
         ?focused=${this.hasFocus}
         .host=${this}
         class="${classMap({
-        'code-editor-component': true,
-        'disabled': this.disabled,
-      })}"
+          'code-editor-component': true,
+          disabled: this.disabled,
+        })}"
       >
-        ${(this.disabled || this.readonly) 
-          ? html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>` 
-          : nothing
-        }
+        ${this.disabled || this.readonly
+          ? html`<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
+          : nothing}
         <div class="editor"></div>
-        ${!this.editorMonacoInstance ? html`
-          <div class="code-editor-loader">
-            <wc-spinner></wc-spinner> Loading...
-          </div>
-        ` : nothing}
+        ${!this.editorMonacoInstance
+          ? html`
+              <div class="code-editor-loader">
+                <wc-spinner></wc-spinner> Loading...
+              </div>
+            `
+          : nothing}
       </wc-field>
     `;
   }
-}
+}

package/src/code-editor/demo/index.html

@@ -1,27 +1,34 @@
 <!doctype html>
-<html lang='en-GB' data-theme="dark">
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles.css' />
-  <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">
-
-  <style>
-    body {
-      background: var(--color-surface);
-    }
-  </style>
-
-</head>
-<body>
-
-
-<code-editor style="height: 400px" id="business-rule-editor" language="javascript" ></code-editor>
-
-<script type='module'>
-  import '/dist/peacock-loader.js';
-
-  document.getElementById("business-rule-editor").value = `/**
+<html lang="en-GB" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <link rel="stylesheet" href="/dist/assets/styles.css" />
+    <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"
+    />
+
+    <style>
+      body {
+        background: var(--color-surface);
+      }
+    </style>
+  </head>
+  <body>
+    <code-editor
+      style="height: 400px"
+      id="business-rule-editor"
+      language="javascript"
+    ></code-editor>
+
+    <script type="module">
+      import '/dist/loader.js';
+
+      document.getElementById('business-rule-editor').value = `/**
       * Sample Code
       */
       function myBusinessRuleFunction(){
@@ -30,8 +37,6 @@
         let c = a + b;
         console.log(c);
       }`;
-</script>
-
-
-</body>
+    </script>
+  </body>
 </html>