material-web-evo 10002.10001.10000

package/tabs/internal/tab-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./tabs/internal/tab-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{display:inline-flex;align-items:center;justify-content:center;outline:none;padding:0 16px;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color);z-index:0;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-elevation-level: var(--_container-elevation)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button::before{background:var(--_container-color);content:"";inset:0;position:absolute;z-index:-1}.button::before,md-ripple,md-elevation{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}:host(:hover){color:var(--_hover-label-text-color);cursor:pointer}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus){color:var(--_focus-label-text-color)}:host(:focus) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active){color:var(--_pressed-label-text-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]){color:var(--_active-label-text-color);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]:hover){color:var(--_active-hover-label-text-color)}:host([active]:hover) ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]:focus){color:var(--_active-focus-label-text-color)}:host([active]:focus) ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]:active){color:var(--_active-pressed-label-text-color)}:host([active]:active) ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}
+`;
+//# sourceMappingURL=tab-styles.js.map

package/tabs/internal/tab-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-styles.js","sourceRoot":"","sources":["tab-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,2DAA2D;AAC3D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./tabs/internal/tab-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{display:inline-flex;align-items:center;justify-content:center;outline:none;padding:0 16px;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:middle;user-select:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);color:var(--_label-text-color);z-index:0;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);--md-elevation-level: var(--_container-elevation)}md-focus-ring{--md-focus-ring-shape: 8px}:host([active]) md-focus-ring{margin-bottom:calc(var(--_active-indicator-height) + 1px)}.button::before{background:var(--_container-color);content:\"\";inset:0;position:absolute;z-index:-1}.button::before,md-ripple,md-elevation{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start)}.content{position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;height:var(--_container-height);gap:8px}.indicator{position:absolute;box-sizing:border-box;z-index:-1;transform-origin:bottom left;background:var(--_active-indicator-color);border-radius:var(--_active-indicator-shape);height:var(--_active-indicator-height);inset:auto 0 0 0;opacity:0}::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);width:var(--_icon-size);height:var(--_icon-size)}:host(:hover){color:var(--_hover-label-text-color);cursor:pointer}:host(:hover) ::slotted([slot=icon]){color:var(--_hover-icon-color)}:host(:focus){color:var(--_focus-label-text-color)}:host(:focus) ::slotted([slot=icon]){color:var(--_focus-icon-color)}:host(:active){color:var(--_pressed-label-text-color)}:host(:active) ::slotted([slot=icon]){color:var(--_pressed-icon-color)}:host([active]) .indicator{opacity:1}:host([active]){color:var(--_active-label-text-color);--md-ripple-hover-color: var(--_active-hover-state-layer-color);--md-ripple-hover-opacity: var(--_active-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_active-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_active-pressed-state-layer-opacity)}:host([active]) ::slotted([slot=icon]){color:var(--_active-icon-color)}:host([active]:hover){color:var(--_active-hover-label-text-color)}:host([active]:hover) ::slotted([slot=icon]){color:var(--_active-hover-icon-color)}:host([active]:focus){color:var(--_active-focus-label-text-color)}:host([active]:focus) ::slotted([slot=icon]){color:var(--_active-focus-icon-color)}:host([active]:active){color:var(--_active-pressed-label-text-color)}:host([active]:active) ::slotted([slot=icon]){color:var(--_active-pressed-icon-color)}:host,::slotted(*){white-space:nowrap}@media(forced-colors: active){.indicator{background:CanvasText}}\n`;\n"]}

package/tabs/internal/tab-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './tab';
+// go/keep-sorted end
+
+@include tab.styles;

package/tabs/internal/tab.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/**
+ * Symbol for tabs to use to animate their indicators based off another tab's
+ * indicator.
+ */
+declare const INDICATOR: unique symbol;
+/**
+ * Symbol used by the tab bar to request a tab to animate its indicator from a
+ * previously selected tab.
+ */
+export declare const ANIMATE_INDICATOR: unique symbol;
+declare const tabBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/focusable.js").Focusable>;
+/**
+ * Tab component.
+ */
+export declare class Tab extends tabBaseClass {
+    /**
+     * The attribute `md-tab` indicates that the element is a tab for the parent
+     * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
+     * component that you have an `md-tab` attribute set.
+     */
+    readonly isTab = true;
+    /**
+     * Whether or not the tab is selected.
+     **/
+    active: boolean;
+    /**
+     * @deprecated use `active`
+     */
+    get selected(): boolean;
+    set selected(active: boolean);
+    /**
+     * In SSR, set this to true when an icon is present.
+     */
+    hasIcon: boolean;
+    /**
+     * In SSR, set this to true when there is no label and only an icon.
+     */
+    iconOnly: boolean;
+    readonly [INDICATOR]: HTMLElement | null;
+    protected fullWidthIndicator: boolean;
+    private readonly assignedDefaultNodes;
+    private readonly assignedIcons;
+    private readonly internals;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected getContentClasses(): ClassInfo;
+    protected updated(): void;
+    private handleKeydown;
+    private handleContentClick;
+    [ANIMATE_INDICATOR](previousTab: Tab): void;
+    private getKeyframes;
+    private handleSlotChange;
+    private handleIconSlotChange;
+}
+export {};

package/tabs/internal/tab.js

@@ -0,0 +1,204 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements, queryAssignedNodes, state, } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { EASING } from '../../internal/motion/animation.js';
+import { mixinFocusable } from '../../labs/behaviors/focusable.js';
+/**
+ * Symbol for tabs to use to animate their indicators based off another tab's
+ * indicator.
+ */
+const INDICATOR = Symbol('indicator');
+/**
+ * Symbol used by the tab bar to request a tab to animate its indicator from a
+ * previously selected tab.
+ */
+export const ANIMATE_INDICATOR = Symbol('animateIndicator');
+// Separate variable needed for closure.
+const tabBaseClass = mixinFocusable(LitElement);
+/**
+ * Tab component.
+ */
+export class Tab extends tabBaseClass {
+    /**
+     * @deprecated use `active`
+     */
+    get selected() {
+        return this.active;
+    }
+    set selected(active) {
+        this.active = active;
+    }
+    constructor() {
+        super();
+        /**
+         * The attribute `md-tab` indicates that the element is a tab for the parent
+         * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`
+         * component that you have an `md-tab` attribute set.
+         */
+        this.isTab = true;
+        /**
+         * Whether or not the tab is selected.
+         **/
+        this.active = false;
+        /**
+         * In SSR, set this to true when an icon is present.
+         */
+        this.hasIcon = false;
+        /**
+         * In SSR, set this to true when there is no label and only an icon.
+         */
+        this.iconOnly = false;
+        this.fullWidthIndicator = false;
+        this.internals = 
+        // Cast needed for closure
+        this.attachInternals();
+        if (!isServer) {
+            this.internals.role = 'tab';
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+    }
+    render() {
+        const indicator = html `<div class="indicator"></div>`;
+        return html `<div
+      class="button"
+      role="presentation"
+      @click=${this.handleContentClick}>
+      <md-focus-ring part="focus-ring" inward .control=${this}></md-focus-ring>
+      <md-elevation part="elevation"></md-elevation>
+      <md-ripple .control=${this}></md-ripple>
+      <div
+        class="content ${classMap(this.getContentClasses())}"
+        role="presentation">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.fullWidthIndicator ? nothing : indicator}
+      </div>
+      ${this.fullWidthIndicator ? indicator : nothing}
+    </div>`;
+    }
+    getContentClasses() {
+        return {
+            'has-icon': this.hasIcon,
+            'has-label': !this.iconOnly,
+        };
+    }
+    updated() {
+        this.internals.ariaSelected = String(this.active);
+    }
+    async handleKeydown(event) {
+        // Allow event to bubble.
+        await 0;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            // Prevent default behavior such as scrolling when pressing spacebar.
+            event.preventDefault();
+            this.click();
+        }
+    }
+    handleContentClick(event) {
+        // Ensure the "click" target is always the tab, and not content, by stopping
+        // propagation of content clicks and re-clicking the host.
+        event.stopPropagation();
+        this.click();
+    }
+    [(_a = INDICATOR, ANIMATE_INDICATOR)](previousTab) {
+        if (!this[INDICATOR]) {
+            return;
+        }
+        this[INDICATOR].getAnimations().forEach((a) => {
+            a.cancel();
+        });
+        const frames = this.getKeyframes(previousTab);
+        if (frames !== null) {
+            this[INDICATOR].animate(frames, {
+                duration: 250,
+                easing: EASING.EMPHASIZED,
+            });
+        }
+    }
+    getKeyframes(previousTab) {
+        const reduceMotion = shouldReduceMotion();
+        if (!this.active) {
+            return reduceMotion ? [{ 'opacity': 1 }, { 'transform': 'none' }] : null;
+        }
+        const from = {};
+        const fromRect = previousTab[INDICATOR]?.getBoundingClientRect() ?? {};
+        const fromPos = fromRect.left;
+        const fromExtent = fromRect.width;
+        const toRect = this[INDICATOR].getBoundingClientRect();
+        const toPos = toRect.left;
+        const toExtent = toRect.width;
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion &&
+            fromPos !== undefined &&
+            toPos !== undefined &&
+            !isNaN(scale)) {
+            from['transform'] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
+        }
+        else {
+            from['opacity'] = 0;
+        }
+        // note, including `transform: none` avoids quirky Safari behavior
+        // that can hide the animation.
+        return [from, { 'transform': 'none' }];
+    }
+    handleSlotChange() {
+        this.iconOnly = false;
+        // Check if there's any label text or elements. If not, then there is only
+        // an icon.
+        for (const node of this.assignedDefaultNodes) {
+            const hasTextContent = node.nodeType === Node.TEXT_NODE &&
+                !!node.wholeText.match(/\S/);
+            if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+                return;
+            }
+        }
+        this.iconOnly = true;
+    }
+    handleIconSlotChange() {
+        this.hasIcon = this.assignedIcons.length > 0;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'md-tab' })
+], Tab.prototype, "isTab", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tab.prototype, "selected", null);
+__decorate([
+    property({ type: Boolean, attribute: 'has-icon' })
+], Tab.prototype, "hasIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], Tab.prototype, "iconOnly", void 0);
+__decorate([
+    query('.indicator')
+], Tab.prototype, _a, void 0);
+__decorate([
+    state()
+], Tab.prototype, "fullWidthIndicator", void 0);
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], Tab.prototype, "assignedDefaultNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], Tab.prototype, "assignedIcons", void 0);
+function shouldReduceMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+//# sourceMappingURL=tab.js.map

package/tabs/internal/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACxD,OAAO,EACL,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,kBAAkB,EAClB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAC1D,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAEjE;;;GAGG;AACH,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;AAEtC;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAE5D,wCAAwC;AACxC,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,OAAO,GAAI,SAAQ,YAAY;IAcnC;;OAEG;IAEH,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,QAAQ,CAAC,MAAe;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAsBD;QACE,KAAK,EAAE,CAAC;QA7CV;;;;WAIG;QAEM,UAAK,GAAG,IAAI,CAAC;QAEtB;;YAEI;QACsC,WAAM,GAAG,KAAK,CAAC;QAazD;;WAEG;QAC+C,YAAO,GAAG,KAAK,CAAC;QAElE;;WAEG;QACgD,aAAQ,GAAG,KAAK,CAAC;QAGjD,uBAAkB,GAAG,KAAK,CAAC;QAK7B,cAAS;QACxB,0BAA0B;QACzB,IAAoB,CAAC,eAAe,EAAE,CAAC;QAIxC,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,SAAS,GAAG,IAAI,CAAA,+BAA+B,CAAC;QACtD,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,kBAAkB;yDACmB,IAAI;;4BAEjC,IAAI;;yBAEP,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;;wCAEnB,IAAI,CAAC,oBAAoB;4BACrC,IAAI,CAAC,gBAAgB;UACvC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;;QAE/C,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;WAC1C,CAAC;IACV,CAAC;IAES,iBAAiB;QACzB,OAAO;YACL,UAAU,EAAE,IAAI,CAAC,OAAO;YACxB,WAAW,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC5B,CAAC;IACJ,CAAC;IAEkB,OAAO;QACxB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpD,CAAC;IAEO,KAAK,CAAC,aAAa,CAAC,KAAoB;QAC9C,yBAAyB;QACzB,MAAM,CAAC,CAAC;QACR,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAO;SACR;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,qEAAqE;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;IACH,CAAC;IAEO,kBAAkB,CAAC,KAAY;QACrC,4EAA4E;QAC5E,0DAA0D;QAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,OAtE+B,SAAS,EAsEvC,iBAAiB,EAAC,CAAC,WAAgB;QAClC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YACpB,OAAO;SACR;QAED,IAAI,CAAC,SAAS,CAAC,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YAC5C,CAAC,CAAC,MAAM,EAAE,CAAC;QACb,CAAC,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QAC9C,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC9B,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,MAAM,CAAC,UAAU;aAC1B,CAAC,CAAC;SACJ;IACH,CAAC;IAEO,YAAY,CAAC,WAAgB;QACnC,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,EAAC,EAAE,EAAC,WAAW,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;SACtE;QAED,MAAM,IAAI,GAAa,EAAE,CAAC;QAC1B,MAAM,QAAQ,GACZ,WAAW,CAAC,SAAS,CAAC,EAAE,qBAAqB,EAAE,IAAK,EAAc,CAAC;QACrE,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAE,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC;QAC1B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;QAC9B,MAAM,KAAK,GAAG,UAAU,GAAG,QAAQ,CAAC;QACpC,IACE,CAAC,YAAY;YACb,OAAO,KAAK,SAAS;YACrB,KAAK,KAAK,SAAS;YACnB,CAAC,KAAK,CAAC,KAAK,CAAC,EACb;YACA,IAAI,CAAC,WAAW,CAAC,GAAG,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,OAAO,CACzD,CAAC,CACF,cAAc,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;SACrB;QACD,kEAAkE;QAClE,+BAA+B;QAC/B,OAAO,CAAC,IAAI,EAAE,EAAC,WAAW,EAAE,MAAM,EAAC,CAAC,CAAC;IACvC,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,0EAA0E;QAC1E,WAAW;QACX,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC5C,MAAM,cAAc,GAClB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS;gBAChC,CAAC,CAAE,IAAa,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,IAAI,cAAc,EAAE;gBACzD,OAAO;aACR;SACF;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;CACF;AAtKU;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;kCACxC;AAKoB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mCAAgB;AAMzD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;mCAGzB;AAQiD;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAC,CAAC;oCAAiB;AAKf;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;qCAAkB;AAEtC;IAA7B,KAAK,CAAC,YAAY,CAAC;6BAA2C;AAC5C;IAAlB,KAAK,EAAE;+CAAsC;AAE7B;IADhB,kBAAkB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACW;AAE9B;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CACN;AAuIjD,SAAS,kBAAkB;IACzB,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  queryAssignedNodes,\n  state,\n} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\nimport {mixinFocusable} from '../../labs/behaviors/focusable.js';\n\n/**\n * Symbol for tabs to use to animate their indicators based off another tab's\n * indicator.\n */\nconst INDICATOR = Symbol('indicator');\n\n/**\n * Symbol used by the tab bar to request a tab to animate its indicator from a\n * previously selected tab.\n */\nexport const ANIMATE_INDICATOR = Symbol('animateIndicator');\n\n// Separate variable needed for closure.\nconst tabBaseClass = mixinFocusable(LitElement);\n\n/**\n * Tab component.\n */\nexport class Tab extends tabBaseClass {\n  /**\n   * The attribute `md-tab` indicates that the element is a tab for the parent\n   * element, `<md-tabs>`. Make sure if you're implementing your own `md-tab`\n   * component that you have an `md-tab` attribute set.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-tab'})\n  readonly isTab = true;\n\n  /**\n   * Whether or not the tab is selected.\n   **/\n  @property({type: Boolean, reflect: true}) active = false;\n\n  /**\n   * @deprecated use `active`\n   */\n  @property({type: Boolean})\n  get selected() {\n    return this.active;\n  }\n  set selected(active: boolean) {\n    this.active = active;\n  }\n\n  /**\n   * In SSR, set this to true when an icon is present.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * In SSR, set this to true when there is no label and only an icon.\n   */\n  @property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;\n\n  @query('.indicator') readonly [INDICATOR]!: HTMLElement | null;\n  @state() protected fullWidthIndicator = false;\n  @queryAssignedNodes({flatten: true})\n  private readonly assignedDefaultNodes!: Node[];\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n  private readonly internals =\n    // Cast needed for closure\n    (this as HTMLElement).attachInternals();\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.internals.role = 'tab';\n      this.addEventListener('keydown', this.handleKeydown.bind(this));\n    }\n  }\n\n  protected override render() {\n    const indicator = html`<div class=\"indicator\"></div>`;\n    return html`<div\n      class=\"button\"\n      role=\"presentation\"\n      @click=${this.handleContentClick}>\n      <md-focus-ring part=\"focus-ring\" inward .control=${this}></md-focus-ring>\n      <md-elevation part=\"elevation\"></md-elevation>\n      <md-ripple .control=${this}></md-ripple>\n      <div\n        class=\"content ${classMap(this.getContentClasses())}\"\n        role=\"presentation\">\n        <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}></slot>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${this.fullWidthIndicator ? nothing : indicator}\n      </div>\n      ${this.fullWidthIndicator ? indicator : nothing}\n    </div>`;\n  }\n\n  protected getContentClasses(): ClassInfo {\n    return {\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n    };\n  }\n\n  protected override updated() {\n    this.internals.ariaSelected = String(this.active);\n  }\n\n  private async handleKeydown(event: KeyboardEvent) {\n    // Allow event to bubble.\n    await 0;\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      // Prevent default behavior such as scrolling when pressing spacebar.\n      event.preventDefault();\n      this.click();\n    }\n  }\n\n  private handleContentClick(event: Event) {\n    // Ensure the \"click\" target is always the tab, and not content, by stopping\n    // propagation of content clicks and re-clicking the host.\n    event.stopPropagation();\n    this.click();\n  }\n\n  [ANIMATE_INDICATOR](previousTab: Tab) {\n    if (!this[INDICATOR]) {\n      return;\n    }\n\n    this[INDICATOR].getAnimations().forEach((a) => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes(previousTab);\n    if (frames !== null) {\n      this[INDICATOR].animate(frames, {\n        duration: 250,\n        easing: EASING.EMPHASIZED,\n      });\n    }\n  }\n\n  private getKeyframes(previousTab: Tab) {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.active) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n\n    const from: Keyframe = {};\n    const fromRect =\n      previousTab[INDICATOR]?.getBoundingClientRect() ?? ({} as DOMRect);\n    const fromPos = fromRect.left;\n    const fromExtent = fromRect.width;\n    const toRect = this[INDICATOR]!.getBoundingClientRect();\n    const toPos = toRect.left;\n    const toExtent = toRect.width;\n    const scale = fromExtent / toExtent;\n    if (\n      !reduceMotion &&\n      fromPos !== undefined &&\n      toPos !== undefined &&\n      !isNaN(scale)\n    ) {\n      from['transform'] = `translateX(${(fromPos - toPos).toFixed(\n        4,\n      )}px) scaleX(${scale.toFixed(4)})`;\n    } else {\n      from['opacity'] = 0;\n    }\n    // note, including `transform: none` avoids quirky Safari behavior\n    // that can hide the animation.\n    return [from, {'transform': 'none'}];\n  }\n\n  private handleSlotChange() {\n    this.iconOnly = false;\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of this.assignedDefaultNodes) {\n      const hasTextContent =\n        node.nodeType === Node.TEXT_NODE &&\n        !!(node as Text).wholeText.match(/\\S/);\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        return;\n      }\n    }\n\n    this.iconOnly = true;\n  }\n\n  private handleIconSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/tabs/internal/tabs-styles.css

@@ -0,0 +1 @@
+:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;overflow:inherit;scroll-behavior:inherit;scrollbar-width:inherit;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([active]){z-index:1}/*# sourceMappingURL=tabs-styles.css.map */

package/tabs/internal/tabs-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_tabs.scss"],"names":[],"mappings":"AAQE,MACE,sBACA,aACA,sBACA,cACA,uBACA,qBACA,kBAGF,gBACE,aAGF,yBACE,aAGF,MACE,gBACA,aACA,YACA,iBACA,wBACA,wBACA,8BACA,WAGF,aACE,OAKF,oBACE","file":"tabs-styles.css"}

package/tabs/internal/tabs-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/tabs/internal/tabs-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./tabs/internal/tabs-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;overflow:inherit;scroll-behavior:inherit;scrollbar-width:inherit;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([active]){z-index:1}
+`;
+//# sourceMappingURL=tabs-styles.js.map

package/tabs/internal/tabs-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-styles.js","sourceRoot":"","sources":["tabs-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,4DAA4D;AAC5D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./tabs/internal/tabs-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{box-sizing:border-box;display:flex;flex-direction:column;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;position:relative}:host([hidden]){display:none}:host::-webkit-scrollbar{display:none}.tabs{align-items:end;display:flex;height:100%;overflow:inherit;scroll-behavior:inherit;scrollbar-width:inherit;justify-content:space-between;width:100%}::slotted(*){flex:1}::slotted([active]){z-index:1}\n`;\n"]}

package/tabs/internal/tabs-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './tabs';
+// go/keep-sorted end
+
+@include tabs.styles;

package/tabs/internal/tabs.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../divider/divider.js';
+import { LitElement } from 'lit';
+import { Tab } from './tab.js';
+/**
+ * @fires change {Event} Fired when the selected tab changes. The target's
+ * `activeTabIndex` or `activeTab` provide information about the selection
+ * change. The change event is fired when a user interaction like a space/enter
+ * key or click cause a selection change. The tab selection based on these
+ * actions can be cancelled by calling preventDefault on the triggering
+ * `keydown` or `click` event. --bubbles
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.activeTabIndex === 2)
+ *     takeAction();
+ *   }
+ * });
+ *
+ * // prevent a click from triggering tab selection under some condition
+ * tabs.addEventListener('click', (event: Event) => {
+ *   if (notReady)
+ *     event.preventDefault();
+ *   }
+ * });
+ *
+ */
+export declare class Tabs extends LitElement {
+    /**
+     * The tabs of this tab bar.
+     */
+    readonly tabs: Tab[];
+    /**
+     * The currently selected tab, `null` only when there are no tab children.
+     *
+     * @export
+     */
+    get activeTab(): Tab | null;
+    set activeTab(tab: Tab | null);
+    /**
+     * The index of the currently selected tab.
+     *
+     * @export
+     */
+    get activeTabIndex(): number;
+    set activeTabIndex(index: number);
+    /**
+     * Whether or not to automatically select a tab when it is focused.
+     */
+    autoActivate: boolean;
+    private readonly tabsScrollerElement;
+    private readonly slotElement;
+    private get focusedTab();
+    private readonly internals;
+    constructor();
+    /**
+     * Scrolls the toolbar, if overflowing, to the active tab, or the provided
+     * tab.
+     *
+     * @param tabToScrollTo The tab that should be scrolled to. Defaults to the
+     *     active tab.
+     * @return A Promise that resolves after the tab has been scrolled to.
+     */
+    scrollToTab(tabToScrollTo?: Tab | null): Promise<void>;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleTabClick;
+    private activateTab;
+    private updateFocusableTab;
+    private handleKeydown;
+    private handleKeyup;
+    private handleFocusout;
+    private handleSlotChange;
+}