@redvars/peacock 3.8.1 → 3.8.2

package/dist/ripple.js

@@ -0,0 +1,506 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { A as AttachableController } from './attachable-controller-CAKVrfcG.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+const PRESS_GROW_MS = 450;
+const MINIMUM_PRESS_MS = 225;
+const INITIAL_ORIGIN_SCALE = 0.2;
+const PADDING = 10;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+const PRESS_PSEUDO = '::after';
+const ANIMATION_FILL = 'forwards';
+/**
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+var State;
+(function (State) {
+    /**
+     * Initial state of the control, no touch in progress.
+     *
+     * Transitions:
+     *   - on touch down: transition to `TOUCH_DELAY`.
+     *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["INACTIVE"] = 0] = "INACTIVE";
+    /**
+     * Touch down has been received, waiting to determine if it's a swipe or
+     * scroll.
+     *
+     * Transitions:
+     *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+     *   - on cancel: transition to `INACTIVE`.
+     *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+     */
+    State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
+    /**
+     * A touch has been deemed to be a press
+     *
+     * Transitions:
+     *  - on up: transition to `WAITING_FOR_CLICK`.
+     */
+    State[State["HOLDING"] = 2] = "HOLDING";
+    /**
+     * The user touch has finished, transition into rest state.
+     *
+     * Transitions:
+     *   - on click end press; transition to `INACTIVE`.
+     */
+    State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(State || (State = {}));
+/**
+ * Events that the ripple listens to.
+ */
+const EVENTS = [
+    'click',
+    'contextmenu',
+    'pointercancel',
+    'pointerdown',
+    'pointerenter',
+    'pointerleave',
+    'pointerup',
+];
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
+/**
+ * @label Ripple
+ * @tag wc-ripple
+ * @rawTag ripple
+ *
+ * @summary Provides ripple effect for interactive elements.
+ * @overview
+ * <p>Ripple creates a visual feedback effect when users interact with buttons or other clickable elements.</p>
+ *
+ * @example
+ * ```html
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
+ *   <wc-ripple></wc-ripple>
+ *   Ripple Effect
+ * </div>
+ * ```
+ * @tags display
+ */
+let Ripple = class Ripple extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Disables the ripple.
+         */
+        this.disabled = false;
+        /** True while the pointer is hovering over the host element. */
+        this.hovered = false;
+        /** True while a press animation is playing. */
+        this.pressed = false;
+        // ── Private fields ────────────────────────────────────────────────────────
+        /** CSS size string (e.g. `"48px"`) for the growing ripple circle. */
+        this.rippleSize = '';
+        /** CSS scale factor applied to the ripple at the end of its animation. */
+        this.rippleScale = '';
+        /** Pixel size of the ripple at its initial (pre-grow) state. */
+        this.initialSize = 0;
+        /** Current interaction state of the ripple state machine. */
+        this.state = State.INACTIVE;
+        /** Bound reference to `handleEvent` passed to `addEventListener` / `removeEventListener`. */
+        this._boundHandleEvent = this.handleEvent.bind(this);
+        this.attachableController = new AttachableController(
+        // `LitElement` satisfies the ReactiveControllerHost & HTMLElement shape
+        // required by the controller.
+        this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
+    }
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
+    }
+    get control() {
+        return this.attachableController.control;
+    }
+    set control(control) {
+        this.attachableController.control = control;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detach();
+    }
+    attach(control) {
+        this.attachableController.attach(control);
+    }
+    detach() {
+        this.attachableController.detach();
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS) {
+            prev?.removeEventListener(event, this._boundHandleEvent);
+            next?.addEventListener(event, this._boundHandleEvent);
+        }
+    }
+    render() {
+        const classes = {
+            hovered: this.hovered,
+            pressed: this.pressed,
+        };
+        return b `<div class="surface ${e$1(classes)}"></div>`;
+    }
+    update(changedProps) {
+        if (changedProps.has('disabled') && this.disabled) {
+            this.hovered = false;
+            this.pressed = false;
+        }
+        super.update(changedProps);
+    }
+    handlePointerenter(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = true;
+    }
+    handlePointerleave(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.hovered = false;
+        // release a held mouse or pen press that moves outside the element
+        if (this.state !== State.INACTIVE) {
+            this.endPressAnimation();
+        }
+    }
+    handlePointerup(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        if (this.state === State.HOLDING) {
+            this.state = State.WAITING_FOR_CLICK;
+            return;
+        }
+        if (this.state === State.TOUCH_DELAY) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(this.rippleStartEvent);
+            return;
+        }
+    }
+    async handlePointerdown(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.rippleStartEvent = event;
+        if (!this.isTouch(event)) {
+            this.state = State.WAITING_FOR_CLICK;
+            this.startPressAnimation(event);
+            return;
+        }
+        // Wait for a hold after touch delay
+        this.state = State.TOUCH_DELAY;
+        await new Promise(resolve => {
+            setTimeout(resolve, TOUCH_DELAY_MS);
+        });
+        if (this.state !== State.TOUCH_DELAY) {
+            return;
+        }
+        this.state = State.HOLDING;
+        this.startPressAnimation(event);
+    }
+    handleClick() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.state === State.WAITING_FOR_CLICK) {
+            this.endPressAnimation();
+            return;
+        }
+        if (this.state === State.INACTIVE) {
+            // keyboard synthesized click event
+            this.startPressAnimation();
+            this.endPressAnimation();
+        }
+    }
+    handlePointercancel(event) {
+        if (!this.shouldReactToEvent(event)) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    handleContextmenu() {
+        if (this.disabled) {
+            return;
+        }
+        this.endPressAnimation();
+    }
+    determineRippleSize() {
+        const { height, width } = this.getBoundingClientRect();
+        const maxDim = Math.max(height, width);
+        const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+        const maxRadius = hypotenuse + PADDING;
+        this.initialSize = initialSize;
+        const maybeZoomedScale = (maxRadius + softEdgeSize) / initialSize;
+        this.rippleScale = `${maybeZoomedScale}`;
+        this.rippleSize = `${initialSize}px`;
+    }
+    getTranslationCoordinates(positionEvent) {
+        const { height, width } = this.getBoundingClientRect();
+        // end in the center
+        const endPoint = {
+            x: (width - this.initialSize) / 2,
+            y: (height - this.initialSize) / 2,
+        };
+        let startPoint;
+        if (positionEvent instanceof PointerEvent) {
+            startPoint = this.getNormalizedPointerEventCoords(positionEvent);
+        }
+        else {
+            startPoint = {
+                x: width / 2,
+                y: height / 2,
+            };
+        }
+        // center around start point
+        startPoint = {
+            x: startPoint.x - this.initialSize / 2,
+            y: startPoint.y - this.initialSize / 2,
+        };
+        return { startPoint, endPoint };
+    }
+    startPressAnimation(positionEvent) {
+        if (!this.mdRoot) {
+            return;
+        }
+        this.pressed = true;
+        this.growAnimation?.cancel();
+        this.determineRippleSize();
+        const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
+        const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+        const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+        this.growAnimation = this.mdRoot.animate({
+            top: [0, 0],
+            left: [0, 0],
+            height: [this.rippleSize, this.rippleSize],
+            width: [this.rippleSize, this.rippleSize],
+            transform: [
+                `translate(${translateStart}) scale(1)`,
+                `translate(${translateEnd}) scale(${this.rippleScale})`,
+            ],
+        }, {
+            pseudoElement: PRESS_PSEUDO,
+            duration: PRESS_GROW_MS,
+            easing: 'cubic-bezier(0.2, 0, 0, 1)',
+            fill: ANIMATION_FILL,
+        });
+    }
+    async endPressAnimation() {
+        this.rippleStartEvent = undefined;
+        this.state = State.INACTIVE;
+        const animation = this.growAnimation;
+        let pressAnimationPlayState = Infinity;
+        if (typeof animation?.currentTime === 'number') {
+            pressAnimationPlayState = animation.currentTime;
+        }
+        else if (animation?.currentTime) {
+            pressAnimationPlayState = animation.currentTime.to('ms').value;
+        }
+        if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+            this.pressed = false;
+            return;
+        }
+        await new Promise(resolve => {
+            setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+        });
+        if (this.growAnimation !== animation) {
+            // A new press animation was started. The old animation was canceled and
+            // should not finish the pressed state.
+            return;
+        }
+        this.pressed = false;
+    }
+    /**
+     * Returns `true` if
+     *  - the ripple element is enabled
+     *  - the pointer is primary for the input type
+     *  - the pointer is the pointer that started the interaction, or will start
+     * the interaction
+     *  - the pointer is a touch, or the pointer state has the primary button
+     * held, or the pointer is hovering
+     */
+    shouldReactToEvent(event) {
+        if (this.disabled || !event.isPrimary) {
+            return false;
+        }
+        if (this.rippleStartEvent &&
+            this.rippleStartEvent.pointerId !== event.pointerId) {
+            return false;
+        }
+        if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+            return !this.isTouch(event);
+        }
+        const isPrimaryButton = event.buttons === 1;
+        return this.isTouch(event) || isPrimaryButton;
+    }
+    isTouch({ pointerType }) {
+        return pointerType === 'touch';
+    }
+    async handleEvent(event) {
+        if (FORCED_COLORS?.matches) {
+            // Skip event logic since the ripple is `display: none`.
+            return;
+        }
+        switch (event.type) {
+            case 'click':
+                this.handleClick();
+                break;
+            case 'contextmenu':
+                this.handleContextmenu();
+                break;
+            case 'pointercancel':
+                this.handlePointercancel(event);
+                break;
+            case 'pointerdown':
+                await this.handlePointerdown(event);
+                break;
+            case 'pointerenter':
+                this.handlePointerenter(event);
+                break;
+            case 'pointerleave':
+                this.handlePointerleave(event);
+                break;
+            case 'pointerup':
+                this.handlePointerup(event);
+                break;
+        }
+    }
+    getNormalizedPointerEventCoords(pointerEvent) {
+        const { scrollX, scrollY } = window;
+        const { left, top } = this.getBoundingClientRect();
+        const documentX = scrollX + left;
+        const documentY = scrollY + top;
+        const { pageX, pageY } = pointerEvent;
+        return {
+            x: pageX - documentX,
+            y: pageY - documentY,
+        };
+    }
+};
+Ripple.styles = i `
+    :host {
+      display: flex;
+      margin: auto;
+      pointer-events: none;
+    }
+
+    :host([disabled]) {
+      display: none;
+    }
+
+    @media (forced-colors: active) {
+      :host {
+        display: none;
+      }
+    }
+
+    :host,
+    .surface {
+      border-radius: inherit;
+      corner-shape: inherit;
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+    }
+
+    .surface {
+      -webkit-tap-highlight-color: transparent;
+
+      &::before,
+      &::after {
+        content: '';
+        opacity: 0;
+        position: absolute;
+      }
+
+      &::before {
+        background-color: var(--ripple-pressed-color, var(--color-on-surface));
+        inset: 0;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
+      }
+
+      &::after {
+        background: radial-gradient(
+          closest-side,
+          var(--ripple-pressed-color, var(--color-on-surface))
+            max(calc(100% - 70px), 65%),
+          transparent 100%
+        );
+        transform-origin: center center;
+        transition: opacity 375ms linear;
+      }
+    }
+
+    .hovered::before {
+      opacity: 0.08;
+    }
+
+    .pressed::after {
+      opacity: 0.12;
+      transition-duration: 105ms;
+    }
+  `;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Ripple.prototype, "disabled", void 0);
+__decorate([
+    r()
+], Ripple.prototype, "hovered", void 0);
+__decorate([
+    r()
+], Ripple.prototype, "pressed", void 0);
+__decorate([
+    e('.surface')
+], Ripple.prototype, "mdRoot", void 0);
+Ripple = __decorate([
+    IndividualComponent
+], Ripple);
+
+export { Ripple };
+//# sourceMappingURL=ripple.js.map

package/dist/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sources":["../../src/ripple/ripple.ts"],"sourcesContent":["import { LitElement, html, css, PropertyValues, isServer } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport {\n  Attachable,\n  AttachableController,\n} from '@/__internal/controllers/attachable-controller.js';\n\nconst PRESS_GROW_MS = 450;\nconst MINIMUM_PRESS_MS = 225;\nconst INITIAL_ORIGIN_SCALE = 0.2;\nconst PADDING = 10;\nconst SOFT_EDGE_MINIMUM_SIZE = 75;\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35;\nconst PRESS_PSEUDO = '::after';\nconst ANIMATION_FILL = 'forwards';\n\n/**\n * Interaction states for the ripple.\n *\n * On Touch:\n *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`\n *\n * On Mouse or Pen:\n *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`\n */\nenum State {\n  /**\n   * Initial state of the control, no touch in progress.\n   *\n   * Transitions:\n   *   - on touch down: transition to `TOUCH_DELAY`.\n   *   - on mouse down: transition to `WAITING_FOR_CLICK`.\n   */\n  INACTIVE,\n  /**\n   * Touch down has been received, waiting to determine if it's a swipe or\n   * scroll.\n   *\n   * Transitions:\n   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.\n   *   - on cancel: transition to `INACTIVE`.\n   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.\n   */\n  TOUCH_DELAY,\n  /**\n   * A touch has been deemed to be a press\n   *\n   * Transitions:\n   *  - on up: transition to `WAITING_FOR_CLICK`.\n   */\n  HOLDING,\n  /**\n   * The user touch has finished, transition into rest state.\n   *\n   * Transitions:\n   *   - on click end press; transition to `INACTIVE`.\n   */\n  WAITING_FOR_CLICK,\n}\n\n/**\n * Events that the ripple listens to.\n */\nconst EVENTS = [\n  'click',\n  'contextmenu',\n  'pointercancel',\n  'pointerdown',\n  'pointerenter',\n  'pointerleave',\n  'pointerup',\n];\n\n/**\n * Delay reacting to touch so that we do not show the ripple for a swipe or\n * scroll interaction.\n */\nconst TOUCH_DELAY_MS = 150;\n\n/**\n * Used to detect if HCM is active. Events do not process during HCM when the\n * ripple is not displayed.\n */\nconst FORCED_COLORS = window.matchMedia('(forced-colors: active)');\n\n/**\n * @label Ripple\n * @tag wc-ripple\n * @rawTag ripple\n *\n * @summary Provides ripple effect for interactive elements.\n * @overview\n * <p>Ripple creates a visual feedback effect when users interact with buttons or other clickable elements.</p>\n *\n * @example\n * ```html\n * <style>\n * .ripple-surface {\n *   position: relative;\n *   display: inline-flex;\n *   align-items: center;\n *   justify-content: center;\n *   width: 220px;\n *   height: 64px;\n *   border-radius: 12px;\n *   background: var(--color-surface-container-high);\n *   color: var(--color-on-surface);\n *   overflow: hidden;\n *   cursor: pointer;\n *   user-select: none;\n * }\n * </style>\n * <div class=\"ripple-surface\">\n *   <wc-ripple></wc-ripple>\n *   Ripple Effect\n * </div>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Ripple extends LitElement implements Attachable {\n  static styles = css`\n    :host {\n      display: flex;\n      margin: auto;\n      pointer-events: none;\n    }\n\n    :host([disabled]) {\n      display: none;\n    }\n\n    @media (forced-colors: active) {\n      :host {\n        display: none;\n      }\n    }\n\n    :host,\n    .surface {\n      border-radius: inherit;\n      corner-shape: inherit;\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n    }\n\n    .surface {\n      -webkit-tap-highlight-color: transparent;\n\n      &::before,\n      &::after {\n        content: '';\n        opacity: 0;\n        position: absolute;\n      }\n\n      &::before {\n        background-color: var(--ripple-pressed-color, var(--color-on-surface));\n        inset: 0;\n        transition:\n          opacity 15ms linear,\n          background-color 15ms linear;\n      }\n\n      &::after {\n        background: radial-gradient(\n          closest-side,\n          var(--ripple-pressed-color, var(--color-on-surface))\n            max(calc(100% - 70px), 65%),\n          transparent 100%\n        );\n        transform-origin: center center;\n        transition: opacity 375ms linear;\n      }\n    }\n\n    .hovered::before {\n      opacity: 0.08;\n    }\n\n    .pressed::after {\n      opacity: 0.12;\n      transition-duration: 105ms;\n    }\n  `;\n\n  /**\n   * Disables the ripple.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** True while the pointer is hovering over the host element. */\n  @state() private hovered = false;\n\n  /** True while a press animation is playing. */\n  @state() private pressed = false;\n\n  @query('.surface') private readonly mdRoot!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** CSS size string (e.g. `\"48px\"`) for the growing ripple circle. */\n  private rippleSize = '';\n\n  /** CSS scale factor applied to the ripple at the end of its animation. */\n  private rippleScale = '';\n\n  /** Pixel size of the ripple at its initial (pre-grow) state. */\n  private initialSize = 0;\n\n  /** Reference to the currently running grow animation, if any. */\n  private growAnimation?: Animation;\n\n  /** Current interaction state of the ripple state machine. */\n  private state = State.INACTIVE;\n\n  /** Pointer event that initiated the current press, used to calculate start coordinates. */\n  private rippleStartEvent?: PointerEvent;\n\n  /** Bound reference to `handleEvent` passed to `addEventListener` / `removeEventListener`. */\n  private readonly _boundHandleEvent = this.handleEvent.bind(this);\n\n  get htmlFor() {\n    return this.attachableController.htmlFor;\n  }\n\n  set htmlFor(htmlFor: string | null) {\n    this.attachableController.htmlFor = htmlFor;\n  }\n\n  get control() {\n    return this.attachableController.control;\n  }\n\n  set control(control: HTMLElement | null) {\n    this.attachableController.control = control;\n  }\n\n  private readonly attachableController = new AttachableController(\n    // `LitElement` satisfies the ReactiveControllerHost & HTMLElement shape\n    // required by the controller.\n    this,\n    this.onControlChange.bind(this),\n  );\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.detach();\n  }\n\n  attach(control: HTMLElement) {\n    this.attachableController.attach(control);\n  }\n\n  detach() {\n    this.attachableController.detach();\n  }\n\n  private onControlChange(prev: HTMLElement | null, next: HTMLElement | null) {\n    if (isServer) return;\n\n    for (const event of EVENTS) {\n      prev?.removeEventListener(event, this._boundHandleEvent);\n      next?.addEventListener(event, this._boundHandleEvent);\n    }\n  }\n\n  protected override render() {\n    const classes = {\n      hovered: this.hovered,\n      pressed: this.pressed,\n    };\n\n    return html`<div class=\"surface ${classMap(classes)}\"></div>`;\n  }\n\n  protected override update(changedProps: PropertyValues<Ripple>) {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.hovered = false;\n      this.pressed = false;\n    }\n    super.update(changedProps);\n  }\n\n  handlePointerenter(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  handlePointerleave(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.hovered = false;\n\n    // release a held mouse or pen press that moves outside the element\n    if (this.state !== State.INACTIVE) {\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointerup(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    if (this.state === State.HOLDING) {\n      this.state = State.WAITING_FOR_CLICK;\n      return;\n    }\n\n    if (this.state === State.TOUCH_DELAY) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(this.rippleStartEvent);\n      return;\n    }\n  }\n\n  private async handlePointerdown(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.rippleStartEvent = event;\n    if (!this.isTouch(event)) {\n      this.state = State.WAITING_FOR_CLICK;\n      this.startPressAnimation(event);\n      return;\n    }\n\n    // Wait for a hold after touch delay\n    this.state = State.TOUCH_DELAY;\n    await new Promise(resolve => {\n      setTimeout(resolve, TOUCH_DELAY_MS);\n    });\n\n    if (this.state !== State.TOUCH_DELAY) {\n      return;\n    }\n\n    this.state = State.HOLDING;\n    this.startPressAnimation(event);\n  }\n\n  private handleClick() {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.state === State.WAITING_FOR_CLICK) {\n      this.endPressAnimation();\n      return;\n    }\n\n    if (this.state === State.INACTIVE) {\n      // keyboard synthesized click event\n      this.startPressAnimation();\n      this.endPressAnimation();\n    }\n  }\n\n  private handlePointercancel(event: PointerEvent) {\n    if (!this.shouldReactToEvent(event)) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private handleContextmenu() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.endPressAnimation();\n  }\n\n  private determineRippleSize() {\n    const { height, width } = this.getBoundingClientRect();\n    const maxDim = Math.max(height, width);\n    const softEdgeSize = Math.max(\n      SOFT_EDGE_CONTAINER_RATIO * maxDim,\n      SOFT_EDGE_MINIMUM_SIZE,\n    );\n\n    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);\n    const maxRadius = hypotenuse + PADDING;\n\n    this.initialSize = initialSize;\n    const maybeZoomedScale = (maxRadius + softEdgeSize) / initialSize;\n    this.rippleScale = `${maybeZoomedScale}`;\n    this.rippleSize = `${initialSize}px`;\n  }\n\n  private getTranslationCoordinates(positionEvent?: Event) {\n    const { height, width } = this.getBoundingClientRect();\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    };\n\n    let startPoint;\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent);\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      };\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    };\n\n    return { startPoint, endPoint };\n  }\n\n  private startPressAnimation(positionEvent?: Event) {\n    if (!this.mdRoot) {\n      return;\n    }\n\n    this.pressed = true;\n    this.growAnimation?.cancel();\n    this.determineRippleSize();\n    const { startPoint, endPoint } =\n      this.getTranslationCoordinates(positionEvent);\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;\n\n    this.growAnimation = this.mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [\n          `translate(${translateStart}) scale(1)`,\n          `translate(${translateEnd}) scale(${this.rippleScale})`,\n        ],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: 'cubic-bezier(0.2, 0, 0, 1)',\n        fill: ANIMATION_FILL,\n      },\n    );\n  }\n\n  private async endPressAnimation() {\n    this.rippleStartEvent = undefined;\n    this.state = State.INACTIVE;\n    const animation = this.growAnimation;\n    let pressAnimationPlayState = Infinity;\n    if (typeof animation?.currentTime === 'number') {\n      pressAnimationPlayState = animation.currentTime;\n    } else if (animation?.currentTime) {\n      pressAnimationPlayState = animation.currentTime.to('ms').value;\n    }\n\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false;\n      return;\n    }\n\n    await new Promise(resolve => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);\n    });\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return;\n    }\n\n    this.pressed = false;\n  }\n\n  /**\n   * Returns `true` if\n   *  - the ripple element is enabled\n   *  - the pointer is primary for the input type\n   *  - the pointer is the pointer that started the interaction, or will start\n   * the interaction\n   *  - the pointer is a touch, or the pointer state has the primary button\n   * held, or the pointer is hovering\n   */\n  private shouldReactToEvent(event: PointerEvent) {\n    if (this.disabled || !event.isPrimary) {\n      return false;\n    }\n\n    if (\n      this.rippleStartEvent &&\n      this.rippleStartEvent.pointerId !== event.pointerId\n    ) {\n      return false;\n    }\n\n    if (event.type === 'pointerenter' || event.type === 'pointerleave') {\n      return !this.isTouch(event);\n    }\n\n    const isPrimaryButton = event.buttons === 1;\n    return this.isTouch(event) || isPrimaryButton;\n  }\n\n  private isTouch({ pointerType }: PointerEvent) {\n    return pointerType === 'touch';\n  }\n\n  async handleEvent(event: Event) {\n    if (FORCED_COLORS?.matches) {\n      // Skip event logic since the ripple is `display: none`.\n      return;\n    }\n\n    switch (event.type) {\n      case 'click':\n        this.handleClick();\n        break;\n      case 'contextmenu':\n        this.handleContextmenu();\n        break;\n      case 'pointercancel':\n        this.handlePointercancel(event as PointerEvent);\n        break;\n      case 'pointerdown':\n        await this.handlePointerdown(event as PointerEvent);\n        break;\n      case 'pointerenter':\n        this.handlePointerenter(event as PointerEvent);\n        break;\n      case 'pointerleave':\n        this.handlePointerleave(event as PointerEvent);\n        break;\n      case 'pointerup':\n        this.handlePointerup(event as PointerEvent);\n        break;\n      default:\n        break;\n    }\n  }\n\n  private getNormalizedPointerEventCoords(pointerEvent: PointerEvent): {\n    x: number;\n    y: number;\n  } {\n    const { scrollX, scrollY } = window;\n    const { left, top } = this.getBoundingClientRect();\n    const documentX = scrollX + left;\n    const documentY = scrollY + top;\n    const { pageX, pageY } = pointerEvent;\n    return {\n      x: pageX - documentX,\n      y: pageY - documentY,\n    };\n  }\n}\n"],"names":["LitElement","html","classMap","css","property","state","query"],"mappings":"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"}

package/dist/search.js

@@ -1,10 +1,11 @@
-import { E, A, a as i$1, _ as __decorate, I as IndividualComponent, i as i$2, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r as r$1 } from './state-DwbEjqVk.js';
-import { e as e$1 } from './query-QBcUV-L_.js';
-import { e as e$2 } from './class-map-YU7g0o3B.js';
+import { E, A, i as i$1, _ as __decorate, I as IndividualComponent, a as i$2, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r as r$1 } from './state-DkTK9EGF.js';
+import { e as e$1 } from './query-CHb9Ft_d.js';
+import { e as e$2 } from './class-map-DG7CA1et.js';
 import { e, i, t } from './directive-ZPhl09Yt.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import './base-Cl6v8-BZ.js';
 
 /**
  * @license
@@ -26,6 +27,10 @@ var css_248z$1 = i$1`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
   --search-container-shape: var(--shape-corner-full);
@@ -237,7 +242,7 @@ var css_248z = i$1`:host {
  * @tag wc-search
  * @rawTag search
  *
- * @summary A Material 3 search bar for filtering and finding content.
+ * @summary A search bar for filtering and finding content.
  * @overview
  * <p>The search component provides a text input designed for search interactions.
  * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>