@redvars/peacock 3.6.2 → 3.7.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,13 +41,14 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.5",
+    "@pierre/theme": "^0.0.29",
     "@tiptap/core": "^2.11.3",
     "@tiptap/extension-mention": "^2.11.3",
     "@tiptap/extension-placeholder": "^2.11.3",
     "@tiptap/extension-underline": "^2.11.3",
     "@tiptap/pm": "^2.11.3",
     "@tiptap/starter-kit": "^2.11.3",
-    "@floating-ui/dom": "^1.7.5",
     "@types/prettier": "^3.0.0",
     "d3": "^7.9.0",
     "install": "^0.13.0",
@@ -78,6 +79,7 @@
     "@wc-toolkit/jsdoc-tags": "^1.1.0",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.18.2",
+    "cem-plugin-expanded-types": "^1.4.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.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.6.2/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.7.0/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.2/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.7.0/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/scss/components.scss

@@ -1,3 +1,2 @@
 @use '../src/text/text.css-component.scss';
 @use '../src/link/link.css-component.scss';
-@use '../src/popover/tooltip.css-component.scss';

package/scss/mixin.scss

@@ -8,6 +8,29 @@
   }
 }
 
+@mixin reset-button-styles {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+@mixin reset-link-styles {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
 @mixin get-typography($name) {
   font-family: var(--typography-#{$name}-font-family) !important;
   font-size:  var(--typography-#{$name}-font-size) !important;
@@ -58,18 +81,15 @@
   }
 }
 
-@mixin apply-container-shape($name) {
-  border-start-start-radius: var(--#{$name}-container-shape-start-start, var(--#{$name}-container-shape));
-  border-start-end-radius: var(--#{$name}-container-shape-start-end, var(--#{$name}-container-shape));
-  border-end-start-radius: var(--#{$name}-container-shape-end-start, var(--#{$name}-container-shape));
-  border-end-end-radius: var(--#{$name}-container-shape-end-end, var(--#{$name}-container-shape));
-  corner-shape: var(--#{$name}-container-shape-variant);
+
+// Layers
+@mixin layer-background {
+
 }
 
-@mixin copy-container-shape($from, $to) {
-  --#{$to}-container-shape-start-start: var(--#{$from}-container-shape-start-start, var(--#{$from}-container-shape));
-  --#{$to}-container-shape-start-end: var(--#{$from}-container-shape-start-end, var(--#{$from}-container-shape));
-  --#{$to}-container-shape-end-start: var(--#{$from}-container-shape-end-start, var(--#{$from}-container-shape));
-  --#{$to}-container-shape-end-end: var(--#{$from}-container-shape-end-end, var(--#{$from}-container-shape));
-  --#{$to}-container-shape-variant: var(--#{$from}-container-shape-variant);
-}
+ // NOTE: `apply-container-shape` and `copy-container-shape` were removed.
+// These helpers previously copied container-shape custom properties and
+// applied them as physical border radii. They are intentionally deleted
+// because the loader now manages container shape via CSS custom properties
+// directly. If you need to reintroduce shape helpers, add small, focused
+// utilities instead of the previous macros.

package/scss/styles.scss

@@ -1,8 +1,6 @@
 @use 'tokens.css';
 @use '../src/text/text.css-component.scss';
 @use '../src/link/link.css-component.scss';
-@use '../src/popover/tooltip.css-component.scss';
-
 
 
 
@@ -61,4 +59,4 @@
 .scrollbar-primary::-webkit-scrollbar-thumb {
   background-color: var(--color-primary);
   border-radius: calc(var(--scrollbar-width) / 2);
-}
+}

package/src/__controllers/attachable-controller.ts

@@ -0,0 +1,198 @@
+import { isServer, ReactiveController, ReactiveControllerHost } from 'lit';
+
+/**
+ * An element that can be attached to an associated controlling element.
+ */
+export interface Attachable {
+  /**
+   * Reflects the value of the `for` attribute, which is the ID of the element's
+   * associated control.
+   *
+   * Use this when the elements's associated control is not its parent.
+   *
+   * To manually control an element, set its `for` attribute to `""`.
+   *
+   * @example
+   * ```html
+   * <div class="container">
+   *   <md-attachable for="interactive"></md-attachable>
+   *   <button id="interactive">Action</button>
+   * </div>
+   * ```
+   *
+   * @example
+   * ```html
+   * <button class="manually-controlled">
+   *   <md-attachable for=""></md-attachable>
+   * </button>
+   * ```
+   */
+  htmlFor: string | null;
+
+  /**
+   * Gets or sets the element that controls the visibility of the attachable
+   * element. It is one of:
+   *
+   * - The control referenced by the `for` attribute.
+   * - The control provided to `element.attach(control)`
+   * - The element's parent.
+   * - `null` if the element is not controlled.
+   */
+  control: HTMLElement | null;
+
+  /**
+   * Attaches the element to an interactive control.
+   *
+   * @param control The element that controls the attachable element.
+   */
+  attach(control: HTMLElement): void;
+
+  /**
+   * Detaches the element from its current control.
+   */
+  detach(): void;
+}
+
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController');
+
+/**
+ * The host of an `AttachableController`. The controller will add itself to
+ * the host so it can be retrieved in a global `MutationObserver`.
+ */
+interface AttachableControllerHost extends ReactiveControllerHost, HTMLElement {
+  [ATTACHABLE_CONTROLLER]?: AttachableController;
+}
+
+let FOR_ATTRIBUTE_OBSERVER: MutationObserver | undefined;
+
+if (!isServer) {
+  /**
+   * A global `MutationObserver` that reacts to `for` attribute changes on
+   * `Attachable` elements. If the `for` attribute changes, the controller will
+   * re-attach to the new referenced element.
+   */
+  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+    for (const record of records) {
+      // When a control's `for` attribute changes, inform its
+      // `AttachableController` to update to a new control.
+      (record.target as AttachableControllerHost)[
+        ATTACHABLE_CONTROLLER
+      ]?.hostConnected();
+    }
+  });
+}
+
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+export class AttachableController implements ReactiveController, Attachable {
+  get htmlFor() {
+    return this.host.getAttribute('for');
+  }
+
+  set htmlFor(htmlFor: string | null) {
+    if (htmlFor === null) {
+      this.host.removeAttribute('for');
+    } else {
+      this.host.setAttribute('for', htmlFor);
+    }
+  }
+
+  get control() {
+    if (this.host.hasAttribute('for')) {
+      if (!this.htmlFor || !this.host.isConnected) {
+        return null;
+      }
+
+      return (
+        this.host.getRootNode() as Document | ShadowRoot
+      ).querySelector<HTMLElement>(`#${this.htmlFor}`);
+    }
+
+    return this.currentControl || this.host.parentElement;
+  }
+  set control(control: HTMLElement | null) {
+    if (control) {
+      this.attach(control);
+    } else {
+      this.detach();
+    }
+  }
+
+  private currentControl: HTMLElement | null = null;
+
+  /**
+   * Creates a new controller for an `Attachable` element.
+   *
+   * @param host The `Attachable` element.
+   * @param onControlChange A callback with two parameters for the previous and
+   *     next control. An `Attachable` element may perform setup or teardown
+   *     logic whenever the control changes.
+   */
+  constructor(
+    private readonly host: AttachableControllerHost,
+    private readonly onControlChange: (
+      prev: HTMLElement | null,
+      next: HTMLElement | null,
+    ) => void,
+  ) {
+    host.addController(this);
+    host[ATTACHABLE_CONTROLLER] = this;
+    FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] });
+  }
+
+  attach(control: HTMLElement) {
+    if (control === this.currentControl) {
+      return;
+    }
+
+    this.setCurrentControl(control);
+    // When imperatively attaching, remove the `for` attribute so
+    // that the attached control is used instead of a referenced one.
+    this.host.removeAttribute('for');
+  }
+
+  detach() {
+    this.setCurrentControl(null);
+    // When imperatively detaching, add an empty `for=""` attribute. This will
+    // ensure the control is `null` rather than the `parentElement`.
+    this.host.setAttribute('for', '');
+  }
+
+  /** @private */
+  hostConnected() {
+    this.setCurrentControl(this.control);
+  }
+
+  /** @private */
+  hostDisconnected() {
+    this.setCurrentControl(null);
+  }
+
+  private setCurrentControl(control: HTMLElement | null) {
+    this.onControlChange(this.currentControl, control);
+    this.currentControl = control;
+  }
+}

package/src/__mixins/NativeButtonMixin.ts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { MixinConstructor } from './MixinConstructor.js';
+
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface NativeButtonInterface {
+  htmlType: 'button' | 'submit' | 'reset';
+  disabled: boolean;
+  softDisabled: boolean;
+  disabledReason: string;
+  form: string;
+  name: string;
+  value: string;
+}
+
+/**
+ * 2. Apply the type annotation to the variable.
+ */
+const NativeButtonMixin: <T extends MixinConstructor<LitElement>>(
+  superclass: T,
+) => T & MixinConstructor<NativeButtonInterface> = <
+  T extends MixinConstructor<LitElement>,
+>(
+  superclass: T,
+) => {
+  // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous
+  // prevents the "__childPart" visibility error.
+  class ButtonElement extends superclass implements NativeButtonInterface {
+    /**
+     * The type of the underlying `<button>` element. Maps to the native `type` attribute.
+     * Possible values are `"button"`, `"submit"`, `"reset"`. Defaults to `"button"`.
+     */
+    @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
+      'button';
+
+    /**
+     * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.
+     */
+    @property({ type: Boolean, reflect: true })
+    disabled: boolean = false;
+
+    /**
+     * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.
+     * Use this in combination with `disabledReason` to communicate why the button is unavailable.
+     * Reflects to the `soft-disabled` attribute. Defaults to `false`.
+     */
+    @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
+    softDisabled: boolean = false;
+
+    /**
+     * A human-readable explanation of why the button is disabled or soft-disabled.
+     * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.
+     * Maps to the `disabled-reason` attribute.
+     */
+    @property({ attribute: 'disabled-reason' })
+    disabledReason: string = '';
+
+    /**
+     * The `id` of the `<form>` element to associate the button with.
+     * If omitted, the button is associated with its nearest ancestor form.
+     * Maps to the native `form` attribute.
+     */
+    @property()
+    form: string = '';
+
+    /**
+     * The name of the button, submitted as part of a name/value pair when the associated form is submitted.
+     * Maps to the native `name` attribute.
+     */
+    @property()
+    name: string = '';
+
+    /**
+     * The value of the button, submitted as part of a name/value pair when the associated form is submitted.
+     * Maps to the native `value` attribute.
+     */
+    @property()
+    value: string = '';
+  }
+
+  return ButtonElement as T & MixinConstructor<NativeButtonInterface>;
+};
+
+export default NativeButtonMixin;

package/src/__mixins/{BaseHyperlinkMixin.ts → NativeHyperlinkMixin.ts}

@@ -2,26 +2,33 @@ import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type { MixinConstructor } from './MixinConstructor.js';
 
-
 /**
  * 1. Define an interface for the members the mixin adds.
  * This makes the type annotation much cleaner.
  */
-export interface BaseHyperlinkInterface {
+export interface NativeHyperlinkInterface {
   href?: string;
   target: '_self' | '_parent' | '_blank' | '_top' | string;
   rel?: string;
   download?: string;
-  __isLink(): boolean;
 }
 
 /**
  * 2. Apply the type annotation to the variable.
  */
-const BaseHyperlinkMixin: <T extends MixinConstructor<LitElement>>(superclass: T) => T & MixinConstructor<BaseHyperlinkInterface> = <T extends MixinConstructor<LitElement>>(superclass: T) => {
-  // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
+const NativeHyperlinkMixin: <T extends MixinConstructor<LitElement>>(
+  superclass: T,
+) => T & MixinConstructor<NativeHyperlinkInterface> = <
+  T extends MixinConstructor<LitElement>,
+>(
+  superclass: T,
+) => {
+  // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous
   // prevents the "__childPart" visibility error.
-  class BaseHyperlinkElement extends superclass implements BaseHyperlinkInterface {
+  class BaseHyperlinkElement
+    extends superclass
+    implements NativeHyperlinkInterface
+  {
     /**
      * The URL that the hyperlink points to. When set, the component renders as an `<a>` element.
      * Maps to the native `href` attribute.
@@ -53,16 +60,9 @@ const BaseHyperlinkMixin: <T extends MixinConstructor<LitElement>>(superclass: T
      */
     @property()
     download?: string;
-
-    /**
-     * Returns `true` when `href` is set, indicating the component should render as a link.
-     */
-    __isLink(): boolean {
-      return !!this.href;
-    }
   }
 
-  return BaseHyperlinkElement as T & MixinConstructor<BaseHyperlinkInterface>;
+  return BaseHyperlinkElement as T & MixinConstructor<NativeHyperlinkInterface>;
 };
 
-export default BaseHyperlinkMixin;
+export default NativeHyperlinkMixin;

package/src/__utils/is-link.ts

@@ -0,0 +1,3 @@
+export function isLink(element: any): boolean {
+  return element.href !== undefined;
+}

package/src/__utils/observe-slot-change.ts

@@ -20,19 +20,51 @@ export function observerSlotChangesWithCallback(
   slot: HTMLSlotElement | null,
   callback: (hasContent: boolean) => void,
 ) {
-  const observer = new MutationObserver(() => {
-    callback(hasMeaningfulContent(slot));
-  });
-
-  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
-  assignedNodes.forEach(node => {
-    observer.observe(node, {
-      attributes: true,
-      childList: true,
-      characterData: true,
-      subtree: true,
+  if (!slot) return () => {};
+
+  // Keep track of observers for current assigned nodes so we can reconnect
+  let observers: MutationObserver[] = [];
+
+  const observeAssignedNodes = () => {
+    // disconnect previous observers
+    observers.forEach(o => o.disconnect());
+    observers = [];
+
+    const assigned = slot.assignedNodes({ flatten: true }) || [];
+    assigned.forEach(node => {
+      const obs = new MutationObserver(() => {
+        callback(hasMeaningfulContent(slot));
+      });
+      try {
+        obs.observe(node as Node, {
+          attributes: true,
+          childList: true,
+          characterData: true,
+          subtree: true,
+        });
+        observers.push(obs);
+      } catch (e) {
+        // ignore nodes that cannot be observed
+      }
     });
-  });
 
-  callback(hasMeaningfulContent(slot));
-}
+    // initial check
+    callback(hasMeaningfulContent(slot));
+  };
+
+  // When assigned nodes change (elements added/removed), the slot emits a slotchange
+  // event — re-run observer setup so we track the new nodes. This fixes the case
+  // where an element (e.g. <wc-icon>) is removed from light DOM: previously we
+  // only observed the old node and wouldn't detect its removal.
+  const onSlotChange = () => observeAssignedNodes();
+  slot.addEventListener('slotchange', onSlotChange);
+
+  // Start observing
+  observeAssignedNodes();
+
+  // Return a cleanup function so callers can disconnect observers when needed.
+  return () => {
+    observers.forEach(o => o.disconnect());
+    slot.removeEventListener('slotchange', onSlotChange);
+  };
+}

package/src/accordion/accordion-item.scss

@@ -152,7 +152,7 @@
     }
 
     .content-inner {
-      padding: 0 var(--spacing-300) var(--spacing-200); // 0 24dp 16dp
+      padding: var(--spacing-200) var(--spacing-300);
     }
 
     .toggle-icon {

package/src/accordion/accordion-item.ts

@@ -8,7 +8,6 @@ import styles from './accordion-item.scss';
  * @tag wc-accordion-item
  * @rawTag accordion-item
  * @summary An expansion panel with a header that reveals or hides associated content. Follows Material Design 3 expansion panel guidelines.
- * @parentRawTag accordion
  *
  * @slot - The body content revealed when the panel is expanded.
  * @slot heading - The panel title. Renders as `body-large` text.

package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts

@@ -8,7 +8,6 @@ import styles from './breadcrumb-item.scss';
  * @label Breadcrumb Item
  * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
- * @parentRawTag breadcrumb
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
  * @tags navigation
  *

package/src/button/ButtonConstants.ts

@@ -0,0 +1 @@
+export const DISABLED_REASON_ID = 'button-disabled-reason';

package/src/button/GroupButtonInterface.ts

@@ -0,0 +1,4 @@
+export type GroupButtonInterface = {
+  color?: any;
+  variant?: any;
+};

package/src/button/button/button-colors.scss

@@ -20,8 +20,8 @@
 
 @mixin _button-color-toggle-unselected($color) {
 
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
 
   --tonal-button-container-color: var(--color-#{$color}-container);
   --tonal-button-label-text-color: var(--color-on-#{$color}-container);