@api-client/ui 0.0.15 → 0.0.17

package/build/src/md/radio/internals/RadioElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioElement.js","sourceRoot":"","sources":["../../../../../src/md/radio/internals/RadioElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { queryAsync, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { RadioSelectionController } from '../../../controllers/RadioSelectionController.js'\nimport CheckedElement from '../../checkbox/internals/CheckedElement.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { EndPressConfig } from '../../../controllers/ActionController.js'\nimport '../../ripple/ui-ripple.js'\n\n/**\n * A form-associated radio button.\n *\n * ```html\n * <label>\n *  <api-radio name=\"fruit\" value=\"apple\"></api-radio>\n *  Apple\n * </label>\n * <label>\n *  <api-radio name=\"fruit\" value=\"banana\"></api-radio>\n *  Banana\n * </label>\n * <label>\n *  <api-radio name=\"fruit\" value=\"mango\"></api-radio>\n *  Mango\n * </label>\n * ```\n *\n * The radio supports keyboard navigation as the `<input type=\"radio\"/>` does.\n * Radio buttons are grouped by name. This means if another button with the same name\n * is selected, all other with the same name are deselected. It is possible to use\n * two radio inputs with the same name in different forms in the same document.\n * The grouping only affects inputs inside the form.\n */\nexport default class RadioElement extends CheckedElement {\n  protected selection = new RadioSelectionController(this)\n\n  protected override readonly _validationError = 'Please select one of these options.'\n\n  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n  @state() protected accessor showRipple = false\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true\n    return this.ripple\n  }\n\n  override endPress(config: EndPressConfig): void {\n    const downConfig: EndPressConfig = { ...config }\n    if (this.checked) {\n      // prohibits toggling of the radio button.\n      downConfig.cancelled = true\n    }\n    super.endPress(downConfig)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.selection.clearRequired()\n    this.selection.clearTabindex()\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    this.selection.handleSelection()\n    this.focus()\n  }\n\n  protected override _setChecked(value = false): void {\n    if (value) {\n      this.selection.handleSelection()\n    }\n    this._updateFormValue()\n    this.setAttribute('aria-checked', String(value))\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e)\n    this.selection.handleKeyDown(e)\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple()\n      _ripple?.beginPress()\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e)\n    if (['Space'].includes(e.code)) {\n      const _ripple = await this.getRipple()\n      _ripple?.endPress()\n    }\n  }\n\n  protected override async handleFocus(): Promise<void> {\n    const _ripple = await this.getRipple()\n    _ripple?.beginFocus()\n  }\n\n  protected override async handleBlur(): Promise<void> {\n    const _ripple = await this.getRipple()\n    _ripple?.endFocus()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <div class=\"${surfaceClasses}\" ${ripple(this.getRipple)}>\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        ${when(this.showRipple, this.renderRipple)}\n        <div class=\"content\">\n          <div class=\"outer\"></div>\n          <div class=\"inner\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n}\n"]}

package/build/src/md/radio/ui-radio.d.ts

@@ -0,0 +1,11 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/RadioElement.js';
+export declare class UiRadioElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-radio': Element;
+    }
+}
+//# sourceMappingURL=ui-radio.d.ts.map

package/build/src/md/radio/ui-radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-radio.d.ts","sourceRoot":"","sources":["../../../../src/md/radio/ui-radio.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,6BAA6B,CAAA;AAGjD,qBACa,cAAe,SAAQ,OAAO;IACzC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAA;KACpB;CACF"}

package/build/src/md/radio/ui-radio.js

@@ -0,0 +1,27 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/RadioElement.js';
+import styles from './internals/Radio.styles.js';
+let UiRadioElement = (() => {
+    let _classDecorators = [customElement('ui-radio')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiRadioElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiRadioElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiRadioElement = _classThis;
+})();
+export { UiRadioElement };
+//# sourceMappingURL=ui-radio.js.map

package/build/src/md/radio/ui-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-radio.js","sourceRoot":"","sources":["../../../../src/md/radio/ui-radio.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,6BAA6B,CAAA;AACjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;IAGnC,cAAc;4BAD1B,aAAa,CAAC,UAAU,CAAC;;;;sBACU,OAAO;8BAAf,SAAQ,WAAO;;;;YAA3C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAc;;;;;SAAd,cAAc","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/RadioElement.js'\nimport styles from './internals/Radio.styles.js'\n\n@customElement('ui-radio')\nexport class UiRadioElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-radio': Element\n  }\n}\n"]}

package/build/src/md/ripple/internals/ripple.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+interface IPoint {
+    x: number;
+    y: number;
+}
+export default class UiRipple extends LitElement {
+    accessor mdRoot: HTMLElement;
+    /**
+     * @attribute
+     */
+    accessor unbounded: boolean;
+    /**
+     * @attribute
+     */
+    accessor disabled: boolean;
+    protected accessor hovered: boolean;
+    protected accessor focused: boolean;
+    protected accessor pressed: boolean;
+    get isPressed(): boolean;
+    protected rippleSize: string;
+    protected rippleScale: string;
+    protected initialSize: number;
+    protected pressAnimationSignal: import("../../motion/animation.js").AnimationSignal;
+    protected growAnimation: Animation | null;
+    protected delayedEndPressHandle: number | null;
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderRippleClasses(): ClassInfo;
+    protected update(changedProps: PropertyValues<this>): void;
+    protected getDimensions(): DOMRect;
+    protected determineRippleSize(): void;
+    protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): IPoint;
+    protected getTranslationCoordinates(positionEvent?: Event | null): {
+        startPoint: IPoint;
+        endPoint: IPoint;
+    };
+    protected startPressAnimation(positionEvent?: Event | null): void;
+    beginHover(hoverEvent?: Event): void;
+    endHover(): void;
+    beginFocus(): void;
+    endFocus(): void;
+    beginPress(positionEvent?: Event | null): void;
+    endPress(): void;
+}
+export {};
+//# sourceMappingURL=ripple.d.ts.map

package/build/src/md/ripple/internals/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAA;AAYjE,UAAU,MAAM;IACd,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,EAAG,WAAW,CAAA;IAEhD;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,SAAS,CAAC,UAAU,SAAK;IAEzB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAI;IAEzB,SAAS,CAAC,oBAAoB,sDAA0B;IAExD,SAAS,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEhD,SAAS,CAAC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAO;cAElC,MAAM,IAAI,cAAc;IAI3C,mBAAmB;IACnB,SAAS,CAAC,sBAAsB,IAAI,SAAS;cAS1B,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASnE,SAAS,CAAC,aAAa,IAAI,OAAO;IAIlC,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAqBrC,SAAS,CAAC,+BAA+B,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM;IAS7E,SAAS,CAAC,yBAAyB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IA2B3G,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IA0CjE,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;IAMpC,QAAQ,IAAI,IAAI;IAIhB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAIhB,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAS9C,QAAQ,IAAI,IAAI;CAWjB"}

package/build/src/md/ripple/internals/ripple.js

@@ -0,0 +1,233 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createAnimationSignal, Easing } from '../../motion/animation.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';
+let UiRipple = (() => {
+    let _classSuper = LitElement;
+    let _mdRoot_decorators;
+    let _mdRoot_initializers = [];
+    let _mdRoot_extraInitializers = [];
+    let _unbounded_decorators;
+    let _unbounded_initializers = [];
+    let _unbounded_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _hovered_decorators;
+    let _hovered_initializers = [];
+    let _hovered_extraInitializers = [];
+    let _focused_decorators;
+    let _focused_initializers = [];
+    let _focused_extraInitializers = [];
+    let _pressed_decorators;
+    let _pressed_initializers = [];
+    let _pressed_extraInitializers = [];
+    return class UiRipple extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _mdRoot_decorators = [query('.surface')];
+            _unbounded_decorators = [property({ type: Boolean })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _hovered_decorators = [state()];
+            _focused_decorators = [state()];
+            _pressed_decorators = [state()];
+            __esDecorate(this, null, _mdRoot_decorators, { kind: "accessor", name: "mdRoot", static: false, private: false, access: { has: obj => "mdRoot" in obj, get: obj => obj.mdRoot, set: (obj, value) => { obj.mdRoot = value; } }, metadata: _metadata }, _mdRoot_initializers, _mdRoot_extraInitializers);
+            __esDecorate(this, null, _unbounded_decorators, { kind: "accessor", name: "unbounded", static: false, private: false, access: { has: obj => "unbounded" in obj, get: obj => obj.unbounded, set: (obj, value) => { obj.unbounded = value; } }, metadata: _metadata }, _unbounded_initializers, _unbounded_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _hovered_decorators, { kind: "accessor", name: "hovered", static: false, private: false, access: { has: obj => "hovered" in obj, get: obj => obj.hovered, set: (obj, value) => { obj.hovered = value; } }, metadata: _metadata }, _hovered_initializers, _hovered_extraInitializers);
+            __esDecorate(this, null, _focused_decorators, { kind: "accessor", name: "focused", static: false, private: false, access: { has: obj => "focused" in obj, get: obj => obj.focused, set: (obj, value) => { obj.focused = value; } }, metadata: _metadata }, _focused_initializers, _focused_extraInitializers);
+            __esDecorate(this, null, _pressed_decorators, { kind: "accessor", name: "pressed", static: false, private: false, access: { has: obj => "pressed" in obj, get: obj => obj.pressed, set: (obj, value) => { obj.pressed = value; } }, metadata: _metadata }, _pressed_initializers, _pressed_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #mdRoot_accessor_storage = __runInitializers(this, _mdRoot_initializers, void 0);
+        get mdRoot() { return this.#mdRoot_accessor_storage; }
+        set mdRoot(value) { this.#mdRoot_accessor_storage = value; }
+        #unbounded_accessor_storage = (__runInitializers(this, _mdRoot_extraInitializers), __runInitializers(this, _unbounded_initializers, false
+        /**
+         * @attribute
+         */
+        ));
+        /**
+         * @attribute
+         */
+        get unbounded() { return this.#unbounded_accessor_storage; }
+        set unbounded(value) { this.#unbounded_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _unbounded_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        /**
+         * @attribute
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #hovered_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _hovered_initializers, false));
+        get hovered() { return this.#hovered_accessor_storage; }
+        set hovered(value) { this.#hovered_accessor_storage = value; }
+        #focused_accessor_storage = (__runInitializers(this, _hovered_extraInitializers), __runInitializers(this, _focused_initializers, false));
+        get focused() { return this.#focused_accessor_storage; }
+        set focused(value) { this.#focused_accessor_storage = value; }
+        #pressed_accessor_storage = (__runInitializers(this, _focused_extraInitializers), __runInitializers(this, _pressed_initializers, false));
+        get pressed() { return this.#pressed_accessor_storage; }
+        set pressed(value) { this.#pressed_accessor_storage = value; }
+        get isPressed() {
+            return this.pressed;
+        }
+        rippleSize = (__runInitializers(this, _pressed_extraInitializers), '');
+        rippleScale = '';
+        initialSize = 0;
+        pressAnimationSignal = createAnimationSignal();
+        growAnimation = null;
+        delayedEndPressHandle = null;
+        render() {
+            return html `<div class="surface ${classMap(this.getRenderRippleClasses())}"></div>`;
+        }
+        /** @soyTemplate */
+        getRenderRippleClasses() {
+            return {
+                hovered: this.hovered,
+                focused: this.focused,
+                pressed: this.pressed,
+                unbounded: this.unbounded,
+            };
+        }
+        update(changedProps) {
+            if (changedProps.has('disabled') && this.disabled) {
+                this.endHover();
+                this.endFocus();
+                this.endPress();
+            }
+            super.update(changedProps);
+        }
+        getDimensions() {
+            return (this.parentElement ?? this).getBoundingClientRect();
+        }
+        determineRippleSize() {
+            const { height, width } = this.getDimensions();
+            const maxDim = Math.max(height, width);
+            const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+            let maxRadius = maxDim;
+            let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+            const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+            maxRadius = hypotenuse + PADDING;
+            // ensure `initialSize` is even for unbounded
+            if (this.unbounded) {
+                initialSize -= initialSize % 2;
+            }
+            this.initialSize = initialSize;
+            this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;
+            this.rippleSize = `${this.initialSize}px`;
+        }
+        getNormalizedPointerEventCoords(pointerEvent) {
+            const { scrollX, scrollY } = window;
+            const { left, top } = this.getDimensions();
+            const documentX = scrollX + left;
+            const documentY = scrollY + top;
+            const { pageX, pageY } = pointerEvent;
+            return { x: pageX - documentX, y: pageY - documentY };
+        }
+        getTranslationCoordinates(positionEvent) {
+            const { height, width } = this.getDimensions();
+            // 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) {
+            const { mdRoot } = this;
+            if (!mdRoot) {
+                return;
+            }
+            this.determineRippleSize();
+            const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
+            const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+            const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+            const signal = this.pressAnimationSignal.start();
+            const growAnimation = 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: Easing.STANDARD,
+                fill: ANIMATION_FILL,
+            });
+            growAnimation.addEventListener('finish', () => {
+                this.pressAnimationSignal.finish();
+                this.growAnimation = null;
+            });
+            signal.addEventListener('abort', () => {
+                growAnimation.cancel();
+                this.growAnimation = null;
+            });
+            this.growAnimation = growAnimation;
+        }
+        beginHover(hoverEvent) {
+            if (hoverEvent?.pointerType !== 'touch') {
+                this.hovered = true;
+            }
+        }
+        endHover() {
+            this.hovered = false;
+        }
+        beginFocus() {
+            this.focused = true;
+        }
+        endFocus() {
+            this.focused = false;
+        }
+        beginPress(positionEvent) {
+            this.pressed = true;
+            if (this.delayedEndPressHandle !== null) {
+                clearTimeout(this.delayedEndPressHandle);
+                this.delayedEndPressHandle = null;
+            }
+            this.startPressAnimation(positionEvent);
+        }
+        endPress() {
+            const pressAnimationPlayState = (this.growAnimation?.currentTime ?? Infinity);
+            if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+                this.pressed = false;
+            }
+            else {
+                this.delayedEndPressHandle = setTimeout(() => {
+                    this.pressed = false;
+                    this.delayedEndPressHandle = null;
+                }, MINIMUM_PRESS_MS - pressAnimationPlayState);
+            }
+        }
+    };
+})();
+export default UiRipple;
+//# sourceMappingURL=ripple.js.map

package/build/src/md/ripple/internals/ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { createAnimationSignal, Easing } from '../../motion/animation.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\ninterface IPoint {\n  x: number\n  y: number\n}\n\nexport default class UiRipple extends LitElement {\n  @query('.surface') accessor mdRoot!: HTMLElement\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor unbounded = false\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  @state() protected accessor hovered = false\n\n  @state() protected accessor focused = false\n\n  @state() protected accessor pressed = false\n\n  get isPressed(): boolean {\n    return this.pressed\n  }\n\n  protected rippleSize = ''\n\n  protected rippleScale = ''\n\n  protected initialSize = 0\n\n  protected pressAnimationSignal = createAnimationSignal()\n\n  protected growAnimation: Animation | null = null\n\n  protected delayedEndPressHandle: number | null = null\n\n  protected override render(): TemplateResult {\n    return html`<div class=\"surface ${classMap(this.getRenderRippleClasses())}\"></div>`\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      hovered: this.hovered,\n      focused: this.focused,\n      pressed: this.pressed,\n      unbounded: this.unbounded,\n    }\n  }\n\n  protected override update(changedProps: PropertyValues<this>): void {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover()\n      this.endFocus()\n      this.endPress()\n    }\n    super.update(changedProps)\n  }\n\n  protected getDimensions(): DOMRect {\n    return (this.parentElement ?? this).getBoundingClientRect()\n  }\n\n  protected determineRippleSize(): void {\n    const { height, width } = this.getDimensions()\n    const maxDim = Math.max(height, width)\n    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)\n\n    let maxRadius = maxDim\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)\n    maxRadius = hypotenuse + PADDING\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize -= initialSize % 2\n    }\n\n    this.initialSize = initialSize\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`\n    this.rippleSize = `${this.initialSize}px`\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): IPoint {\n    const { scrollX, scrollY } = window\n    const { left, top } = this.getDimensions()\n    const documentX = scrollX + left\n    const documentY = scrollY + top\n    const { pageX, pageY } = pointerEvent\n    return { x: pageX - documentX, y: pageY - documentY }\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event | null): { startPoint: IPoint; endPoint: IPoint } {\n    const { height, width } = this.getDimensions()\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  protected startPressAnimation(positionEvent?: Event | null): void {\n    const { mdRoot } = this\n    if (!mdRoot) {\n      return\n    }\n\n    this.determineRippleSize()\n    const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent)\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`\n\n    const signal = this.pressAnimationSignal.start()\n\n    const growAnimation = 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: [`translate(${translateStart}) scale(1)`, `translate(${translateEnd}) scale(${this.rippleScale})`],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: Easing.STANDARD,\n        fill: ANIMATION_FILL,\n      }\n    )\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish()\n      this.growAnimation = null\n    })\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel()\n      this.growAnimation = null\n    })\n\n    this.growAnimation = growAnimation\n  }\n\n  beginHover(hoverEvent?: Event): void {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true\n    }\n  }\n\n  endHover(): void {\n    this.hovered = false\n  }\n\n  beginFocus(): void {\n    this.focused = true\n  }\n\n  endFocus(): void {\n    this.focused = false\n  }\n\n  beginPress(positionEvent?: Event | null): void {\n    this.pressed = true\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle)\n      this.delayedEndPressHandle = null\n    }\n    this.startPressAnimation(positionEvent)\n  }\n\n  endPress(): void {\n    const pressAnimationPlayState = (this.growAnimation?.currentTime ?? Infinity) as number\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false\n        this.delayedEndPressHandle = null\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number\n    }\n  }\n}\n"]}

package/build/src/md/ripple/internals/ripple.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":";AAEA,wBAoFC"}

package/build/src/md/ripple/internals/ripple.styles.js

@@ -0,0 +1,87 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+    display: flex;
+  }
+
+  :host([disabled]) {
+    opacity: 0;
+  }
+
+  .surface {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+    outline: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .surface::before,
+  .surface::after {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+    content: '';
+  }
+
+  .surface::before {
+    transition:
+      opacity 15ms linear,
+      background-color 15ms linear;
+    inset: 0;
+  }
+
+  .surface::after {
+    transition: opacity 375ms linear;
+    transform-origin: center center;
+  }
+
+  .focused::before {
+    transition-duration: 75ms;
+  }
+
+  .pressed::after {
+    transition-duration: 105ms;
+  }
+
+  .surface {
+    border-radius: var(--md-ripple-state-layer-shape, 0);
+  }
+
+  .surface::before {
+    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
+  }
+
+  .surface::after {
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
+  }
+
+  .surface.hovered::before {
+    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
+    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
+  }
+
+  .surface.focused::before {
+    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));
+    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
+  }
+
+  .surface.pressed::after {
+    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+  }
+
+  .surface.unbounded {
+    border-radius: var(--md-ripple-state-layer-shape, 9999px);
+  }
+`;
+//# sourceMappingURL=ripple.styles.js.map

package/build/src/md/ripple/internals/ripple.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    display: flex;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .surface::before,\n  .surface::after {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    z-index: -1;\n    content: '';\n  }\n\n  .surface::before {\n    transition:\n      opacity 15ms linear,\n      background-color 15ms linear;\n    inset: 0;\n  }\n\n  .surface::after {\n    transition: opacity 375ms linear;\n    transform-origin: center center;\n  }\n\n  .focused::before {\n    transition-duration: 75ms;\n  }\n\n  .pressed::after {\n    transition-duration: 105ms;\n  }\n\n  .surface {\n    border-radius: var(--md-ripple-state-layer-shape, 0);\n  }\n\n  .surface::before {\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface::after {\n    background: radial-gradient(\n      closest-side,\n      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),\n      transparent 100%\n    );\n  }\n\n  .surface.hovered::before {\n    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.focused::before {\n    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));\n    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.pressed::after {\n    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));\n  }\n\n  .surface.unbounded {\n    border-radius: var(--md-ripple-state-layer-shape, 9999px);\n  }\n`\n"]}

package/build/src/md/ripple/ui-ripple.d.ts

@@ -0,0 +1,11 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/ripple.js';
+export declare class UiRippleElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-ripple': Element;
+    }
+}
+//# sourceMappingURL=ui-ripple.d.ts.map

package/build/src/md/ripple/ui-ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-ripple.d.ts","sourceRoot":"","sources":["../../../../src/md/ripple/ui-ripple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAG3C,qBACa,eAAgB,SAAQ,OAAO;IAC1C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAA;KACrB;CACF"}

package/build/src/md/ripple/ui-ripple.js

@@ -0,0 +1,27 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/ripple.js';
+import styles from './internals/ripple.styles.js';
+let UiRippleElement = (() => {
+    let _classDecorators = [customElement('ui-ripple')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiRippleElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiRippleElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiRippleElement = _classThis;
+})();
+export { UiRippleElement };
+//# sourceMappingURL=ui-ripple.js.map

package/build/src/md/ripple/ui-ripple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-ripple.js","sourceRoot":"","sources":["../../../../src/md/ripple/ui-ripple.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,MAAM,MAAM,8BAA8B,CAAA;IAGpC,eAAe;4BAD3B,aAAa,CAAC,WAAW,CAAC;;;;sBACU,OAAO;+BAAf,SAAQ,WAAO;;;;YAA5C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAe;;;;;SAAf,eAAe","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/ripple.js'\nimport styles from './internals/ripple.styles.js'\n\n@customElement('ui-ripple')\nexport class UiRippleElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-ripple': Element\n  }\n}\n"]}

package/build/src/md/segmented-button/internals/SegmentedButton.d.ts

@@ -0,0 +1,38 @@
+import { TemplateResult } from 'lit';
+import { UiElement } from '../../UiElement.js';
+import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
+import UiRipple from '../../ripple/internals/ripple.js';
+import '../../ripple/ui-ripple.js';
+/**
+ * @fires trigger - When a button is triggered.
+ * @slot - Default slot for the label
+ * @slot icon - A slot to render an icon.
+ */
+export default class SegmentedButton extends UiElement {
+    accessor ripple: UiRipple;
+    /**
+     * Whether the button is selected.
+     * @attribute
+     */
+    accessor selected: boolean;
+    protected accessor leadingIcons: HTMLElement[];
+    get disabled(): boolean;
+    /**
+     * When set, the button is a disabled state.
+     * @attribute
+     */
+    set disabled(value: boolean);
+    constructor();
+    connectedCallback(): void;
+    beginPress(options: BeginPressConfig): void;
+    endPress(options: EndPressConfig): void;
+    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    protected handleIconSlotChange(): void;
+    protected render(): TemplateResult;
+    protected leadingContent(): TemplateResult;
+    protected renderLeadingIcon(): TemplateResult;
+    protected renderChecked(): TemplateResult;
+    protected renderRipple: () => TemplateResult;
+}
+//# sourceMappingURL=SegmentedButton.d.ts.map

package/build/src/md/segmented-button/internals/SegmentedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/segmented-button/internals/SegmentedButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,2BAA2B,CAAA;AAElC;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,SAAS;IAChC,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IAC0B,QAAQ,CAAC,QAAQ,UAAQ;IAEE,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAG,WAAW,EAAE,CAAA;IAEvG,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;;IAgBQ,iBAAiB,IAAI,IAAI;IAUzB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAShD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAKlD,SAAS,CAAC,oBAAoB,IAAI,IAAI;cAInB,MAAM,IAAI,cAAc;IAmB3C,SAAS,CAAC,cAAc,IAAI,cAAc;IAS1C,SAAS,CAAC,iBAAiB,IAAI,cAAc;IAY7C,SAAS,CAAC,aAAa,IAAI,cAAc;IAQzC,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}