@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/tabs/internal/tab.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @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, PropertyValues } from 'lit';
+/**
+ * An element that can select items.
+ */
+export interface Tabs extends HTMLElement {
+    selected?: number;
+    selectedItem?: Tab;
+    previousSelectedItem?: Tab;
+}
+type Style = '' | 'primary' | 'secondary';
+type Orientation = '' | 'vertical';
+/**
+ * Tab variant can be `primary` or `secondary and can include a space
+ * separated `vertical`.
+ */
+export type TabVariant = Style | `${Style} ${Orientation}` | `${Orientation} ${Style}`;
+/**
+ * Tab component.
+ */
+export declare class Tab extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * Styling variant to display, 'primary' or 'secondary' and can also
+     * include `vertical`.
+     * Defaults to `primary`.
+     */
+    variant: TabVariant;
+    /**
+     * Whether or not the tab is `disabled`.
+     */
+    disabled: boolean;
+    /**
+     * Whether or not the tab is `selected`.
+     **/
+    selected: boolean;
+    /**
+     * Whether or not the tab is `focusable`.
+     */
+    focusable: boolean;
+    /**
+     * Whether or not the icon renders inline with label or stacked vertically.
+     */
+    inlineIcon: boolean;
+    private readonly button;
+    /**
+     * Selection indicator element.
+     */
+    readonly indicator: HTMLElement;
+    constructor();
+    focus(): void;
+    blur(): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected updated(changed: PropertyValues): void;
+    private readonly handleActivationClick;
+    private get tabs();
+    private animateSelected;
+    private getKeyframes;
+}
+export {};

package/tabs/internal/tab.js

@@ -0,0 +1,164 @@
+/**
+ * @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 } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+import { dispatchActivationClick, isActivationClick } from '../../internal/controller/events.js';
+/**
+ * Tab component.
+ */
+export class Tab extends LitElement {
+    constructor() {
+        super();
+        /**
+         * Styling variant to display, 'primary' or 'secondary' and can also
+         * include `vertical`.
+         * Defaults to `primary`.
+         */
+        this.variant = 'primary';
+        /**
+         * Whether or not the tab is `disabled`.
+         */
+        this.disabled = false;
+        /**
+         * Whether or not the tab is `selected`.
+         **/
+        this.selected = false;
+        /**
+         * Whether or not the tab is `focusable`.
+         */
+        this.focusable = false;
+        /**
+         * Whether or not the icon renders inline with label or stacked vertically.
+         */
+        this.inlineIcon = false;
+        this.handleActivationClick = (event) => {
+            if (!isActivationClick((event)) || !this.button) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.button);
+        };
+        if (!isServer) {
+            this.addEventListener('click', this.handleActivationClick);
+        }
+    }
+    focus() {
+        this.button?.focus();
+    }
+    blur() {
+        this.button?.blur();
+    }
+    render() {
+        const contentClasses = {
+            'inline-icon': this.inlineIcon,
+        };
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="button"
+        role="tab"
+        .tabIndex=${this.focusable && !this.disabled ? 0 : -1}
+        aria-selected=${this.selected ? 'true' : 'false'}
+        ?disabled=${this.disabled}
+        aria-label=${ariaLabel || nothing}
+      >
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
+        <md-elevation></md-elevation>
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <span class="touch"></span>
+        <div class="content ${classMap(contentClasses)}">
+          <slot name="icon"></slot>
+          <span class="label">
+            <slot></slot>
+          </span>
+          <div class="indicator"></div>
+        </div>
+      </button>`;
+    }
+    updated(changed) {
+        if (changed.has('selected') && !this.disabled) {
+            this.animateSelected();
+        }
+    }
+    get tabs() {
+        return this.parentElement;
+    }
+    animateSelected() {
+        this.indicator.getAnimations().forEach(a => {
+            a.cancel();
+        });
+        const frames = this.getKeyframes();
+        if (frames !== null) {
+            this.indicator.animate(frames, { duration: 400, easing: 'ease-out' });
+        }
+    }
+    getKeyframes() {
+        const reduceMotion = shouldReduceMotion();
+        if (!this.selected) {
+            return reduceMotion ? [{ 'opacity': 1 }, { 'transform': 'none' }] : null;
+        }
+        const from = {};
+        const isVertical = this.variant.includes('vertical');
+        const fromRect = (this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
+            {});
+        const fromPos = isVertical ? fromRect.top : fromRect.left;
+        const fromExtent = isVertical ? fromRect.height : fromRect.width;
+        const toRect = this.indicator.getBoundingClientRect();
+        const toPos = isVertical ? toRect.top : toRect.left;
+        const toExtent = isVertical ? toRect.height : toRect.width;
+        const axis = isVertical ? 'Y' : 'X';
+        const scale = fromExtent / toExtent;
+        if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&
+            !isNaN(scale)) {
+            from['transform'] = `translate${axis}(${(fromPos - toPos).toFixed(4)}px) scale${axis}(${scale.toFixed(4)})`;
+        }
+        else {
+            from['opacity'] = 0;
+        }
+        // note, including `transform: none` avoids quirky Safari behavior
+        // that can hide the animation.
+        return [from, { 'transform': 'none' }];
+    }
+}
+_a = Tab;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+/** @nocollapse */
+Tab.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    property({ reflect: true })
+], Tab.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Tab.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tab.prototype, "focusable", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'inline-icon' })
+], Tab.prototype, "inlineIcon", void 0);
+__decorate([
+    query('.button')
+], Tab.prototype, "button", void 0);
+__decorate([
+    query('.indicator')
+], Tab.prototype, "indicator", 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,EAAiB,MAAM,KAAK,CAAC;AACxE,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,uBAAuB,EAAE,iBAAiB,EAAC,MAAM,qCAAqC,CAAC;AAoB/F;;GAEG;AACH,MAAM,OAAO,GAAI,SAAQ,UAAU;IA4CjC;QACE,KAAK,EAAE,CAAC;QApCV;;;;WAIG;QACwB,YAAO,GAAe,SAAS,CAAC;QAE3D;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;YAEI;QACsC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;WAEG;QACwB,cAAS,GAAG,KAAK,CAAC;QAE7C;;WAEG;QACkD,eAAU,GAAG,KAAK,CAAC;QA4DvD,0BAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC7D,IAAI,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBAC/C,OAAO;aACR;YACD,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC,CAAC;QAtDA,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SAC5D;IACH,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IAEQ,IAAI;QACX,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,MAAM,cAAc,GAAG;YACrB,aAAa,EAAE,IAAI,CAAC,UAAU;SAC/B,CAAC;QACF,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;oBAIK,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,IAAI,CAAC,QAAQ;qBACZ,SAAS,IAAI,OAAO;;;;+BAIV,IAAI,CAAC,QAAQ;;8BAEd,QAAQ,CAAC,cAAc,CAAC;;;;;;;gBAOtC,CAAC;IACf,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;IACH,CAAC;IAUD,IAAY,IAAI;QACd,OAAO,IAAI,CAAC,aAAqB,CAAC;IACpC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACzC,CAAC,CAAC,MAAM,EAAE,CAAC;QACb,CAAC,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACnC,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAC,CAAC,CAAC;SACrE;IACH,CAAC;IAEO,YAAY;QAClB,MAAM,YAAY,GAAG,kBAAkB,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAAC,SAAS,EAAE,CAAC,EAAC,EAAE,EAAC,WAAW,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;SACtE;QACD,MAAM,IAAI,GAAa,EAAE,CAAC;QAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrD,MAAM,QAAQ,GACV,CAAC,IAAI,CAAC,IAAI,EAAE,oBAAoB,EAAE,SAAS,CAAC,qBAAqB,EAAE;YACjE,EAAc,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC1D,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;QACjE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC;QACtD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QACpD,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3D,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACpC,MAAM,KAAK,GAAG,UAAU,GAAG,QAAQ,CAAC;QACpC,IAAI,CAAC,YAAY,IAAI,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS;YAC7D,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,GAAG,YAAY,IAAI,IAChC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;SACzE;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;;;AA9ID;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,qBAAiB,GACZ,EAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAC,CAAC;AAO/B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAiC;AAKjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAkB;AAKjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAkB;AAKhC;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAmB;AAKQ;IAApD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;uCAAoB;AAEtD;IAAjB,KAAK,CAAC,SAAS,CAAC;mCAA4C;AAMxC;IAApB,KAAK,CAAC,YAAY,CAAC;sCAAkC;AAwGxD,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, PropertyValues} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {dispatchActivationClick, isActivationClick} from '../../internal/controller/events.js';\n\n/**\n * An element that can select items.\n */\nexport interface Tabs extends HTMLElement {\n  selected?: number;\n  selectedItem?: Tab;\n  previousSelectedItem?: Tab;\n}\n\ntype Style = ''|'primary'|'secondary';\ntype Orientation = ''|'vertical';\n\n/**\n * Tab variant can be `primary` or `secondary and can include a space\n * separated `vertical`.\n */\nexport type TabVariant = Style|`${Style} ${Orientation}`|`${Orientation} ${Style}`;\n\n/**\n * Tab component.\n */\nexport class Tab extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  /**\n   * Styling variant to display, 'primary' or 'secondary' and can also\n   * include `vertical`.\n   * Defaults to `primary`.\n   */\n  @property({reflect: true}) variant: TabVariant = 'primary';\n\n  /**\n   * Whether or not the tab is `disabled`.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Whether or not the tab is `selected`.\n   **/\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Whether or not the tab is `focusable`.\n   */\n  @property({type: Boolean}) focusable = false;\n\n  /**\n   * Whether or not the icon renders inline with label or stacked vertically.\n   */\n  @property({type: Boolean, attribute: 'inline-icon'}) inlineIcon = false;\n\n  @query('.button') private readonly button!: HTMLElement|null;\n\n  // note, this is public so it can participate in selection animation.\n  /**\n   * Selection indicator element.\n   */\n  @query('.indicator') readonly indicator!: HTMLElement;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.button?.focus();\n  }\n\n  override blur() {\n    this.button?.blur();\n  }\n\n  protected override render() {\n    const contentClasses = {\n      'inline-icon': this.inlineIcon,\n    };\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"button\"\n        role=\"tab\"\n        .tabIndex=${this.focusable && !this.disabled ? 0 : -1}\n        aria-selected=${this.selected ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel || nothing}\n      >\n        <md-focus-ring part=\"focus-ring\" inward></md-focus-ring>\n        <md-elevation></md-elevation>\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <span class=\"touch\"></span>\n        <div class=\"content ${classMap(contentClasses)}\">\n          <slot name=\"icon\"></slot>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n          <div class=\"indicator\"></div>\n        </div>\n      </button>`;\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (changed.has('selected') && !this.disabled) {\n      this.animateSelected();\n    }\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick((event)) || !this.button) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.button);\n  };\n\n  private get tabs() {\n    return this.parentElement as Tabs;\n  }\n\n  private animateSelected() {\n    this.indicator.getAnimations().forEach(a => {\n      a.cancel();\n    });\n    const frames = this.getKeyframes();\n    if (frames !== null) {\n      this.indicator.animate(frames, {duration: 400, easing: 'ease-out'});\n    }\n  }\n\n  private getKeyframes() {\n    const reduceMotion = shouldReduceMotion();\n    if (!this.selected) {\n      return reduceMotion ? [{'opacity': 1}, {'transform': 'none'}] : null;\n    }\n    const from: Keyframe = {};\n    const isVertical = this.variant.includes('vertical');\n    const fromRect =\n        (this.tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??\n         ({} as DOMRect));\n    const fromPos = isVertical ? fromRect.top : fromRect.left;\n    const fromExtent = isVertical ? fromRect.height : fromRect.width;\n    const toRect = this.indicator.getBoundingClientRect();\n    const toPos = isVertical ? toRect.top : toRect.left;\n    const toExtent = isVertical ? toRect.height : toRect.width;\n    const axis = isVertical ? 'Y' : 'X';\n    const scale = fromExtent / toExtent;\n    if (!reduceMotion && fromPos !== undefined && toPos !== undefined &&\n        !isNaN(scale)) {\n      from['transform'] = `translate${axis}(${\n          (fromPos - toPos).toFixed(4)}px) scale${axis}(${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\nfunction shouldReduceMotion() {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n"]}

package/tabs/internal/tabs.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues } from 'lit';
+import { Tab, TabVariant } from './tab.js';
+/**
+ * @fires change Fired when the selected tab changes. The target's selected or
+ * selectedItem and previousSelected or previousSelectedItem 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.
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.selected === 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 {
+    /** @nocollapse */
+    static readonly shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Styling variant to display, 'primary' or 'secondary' and can also
+     * include `vertical`.
+     * Defaults to `primary`.
+     */
+    variant: TabVariant;
+    /**
+     * Whether or not the item is `disabled`.
+     */
+    disabled: boolean;
+    /**
+     * Index of the selected item.
+     */
+    selected: number;
+    /**
+     * Whether or not to select an item when focused.
+     */
+    selectOnFocus: boolean;
+    private previousSelected;
+    private orientation;
+    private readonly scrollMargin;
+    private readonly items;
+    private itemsDirty;
+    private readonly selectedAttribute;
+    /**
+     * The item currently selected.
+     */
+    get selectedItem(): Tab;
+    /**
+     * The item previously selected.
+     */
+    get previousSelectedItem(): Tab;
+    /**
+     * The item currently focused.
+     */
+    protected get focusedItem(): Tab;
+    constructor();
+    connectedCallback(): void;
+    private readonly handleKeydown;
+    private readonly handleKeyup;
+    private readonly handleFocusout;
+    private findFocusableItem;
+    private wasEventPrevented;
+    private dispatchInteraction;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): Promise<void>;
+    private updateFocusableItem;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private handleItemClick;
+    private handleSlotChange;
+    private itemsUpdateComplete;
+    private scrollItemIntoView;
+}

package/tabs/internal/tabs.js

@@ -0,0 +1,312 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, isServer, LitElement } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+const NAVIGATION_KEYS = new Map([
+    ['default', new Set(['Home', 'End'])],
+    ['horizontal', new Set(['ArrowLeft', 'ArrowRight'])],
+    ['vertical', new Set(['ArrowUp', 'ArrowDown'])]
+]);
+/**
+ * @fires change Fired when the selected tab changes. The target's selected or
+ * selectedItem and previousSelected or previousSelectedItem 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.
+ *
+ * @example
+ * // perform an action if a tab is clicked
+ * tabs.addEventListener('change', (event: Event) => {
+ *   if (event.target.selected === 2)
+ *      takeAction();
+ *   }
+ * });
+ *
+ * // prevent a click from triggering tab selection under some condition
+ * tabs.addEventListener('click', (event: Event) => {
+ *   if (notReady)
+ *      event.preventDefault();
+ *   }
+ * });
+ *
+ */
+export class Tabs extends LitElement {
+    /**
+     * The item currently selected.
+     */
+    get selectedItem() {
+        return this.items[this.selected];
+    }
+    /**
+     * The item previously selected.
+     */
+    get previousSelectedItem() {
+        return this.items[this.previousSelected];
+    }
+    /**
+     * The item currently focused.
+     */
+    get focusedItem() {
+        return this.items.find((el) => el.matches(':focus-within'));
+    }
+    constructor() {
+        super();
+        /**
+         * Styling variant to display, 'primary' or 'secondary' and can also
+         * include `vertical`.
+         * Defaults to `primary`.
+         */
+        this.variant = 'primary';
+        /**
+         * Whether or not the item is `disabled`.
+         */
+        this.disabled = false;
+        /**
+         * Index of the selected item.
+         */
+        this.selected = 0;
+        /**
+         * Whether or not to select an item when focused.
+         */
+        this.selectOnFocus = false;
+        this.previousSelected = -1;
+        this.orientation = 'horizontal';
+        this.scrollMargin = 48;
+        // this tracks if items have changed, which triggers rendering so they can
+        // be kept in sync
+        this.itemsDirty = false;
+        this.selectedAttribute = `selected`;
+        // focus item on keydown and optionally select it
+        this.handleKeydown = async (event) => {
+            const { key } = event;
+            const shouldHandleKey = NAVIGATION_KEYS.get('default').has(key) ||
+                NAVIGATION_KEYS.get(this.orientation).has(key);
+            // await to after user may cancel event.
+            if (!shouldHandleKey || (await this.wasEventPrevented(event, true)) ||
+                this.disabled) {
+                return;
+            }
+            let indexToFocus = -1;
+            const focused = this.focusedItem ?? this.selectedItem;
+            const itemCount = this.items.length;
+            const isPrevKey = key === 'ArrowLeft' || key === 'ArrowUp';
+            if (key === 'Home') {
+                indexToFocus = 0;
+            }
+            else if (key === 'End') {
+                indexToFocus = itemCount - 1;
+            }
+            else {
+                const focusedIndex = this.items.indexOf(focused) || 0;
+                indexToFocus = focusedIndex + (isPrevKey ? -1 : 1);
+                indexToFocus =
+                    indexToFocus < 0 ? itemCount - 1 : indexToFocus % itemCount;
+            }
+            const itemToFocus = this.findFocusableItem(indexToFocus, key === 'End' || isPrevKey);
+            indexToFocus = this.items.indexOf(itemToFocus);
+            if (itemToFocus !== null && itemToFocus !== focused) {
+                this.updateFocusableItem(itemToFocus);
+                itemToFocus.focus();
+                if (this.selectOnFocus) {
+                    this.selected = indexToFocus;
+                    await this.dispatchInteraction();
+                }
+            }
+        };
+        // scroll to item on keyup.
+        this.handleKeyup = () => {
+            this.scrollItemIntoView(this.focusedItem ?? this.selectedItem);
+        };
+        // restore focus to selected item when blurring.
+        this.handleFocusout = async () => {
+            await this.updateComplete;
+            const nowFocused = this.getRootNode().activeElement;
+            if (this.items.indexOf(nowFocused) === -1) {
+                this.updateFocusableItem(this.selectedItem);
+            }
+        };
+        if (!isServer) {
+            this.addEventListener('keydown', this.handleKeydown);
+            this.addEventListener('keyup', this.handleKeyup);
+            this.addEventListener('focusout', this.handleFocusout);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'tablist');
+    }
+    findFocusableItem(i = -1, prev = false, tries = 0) {
+        const itemCount = this.items.length - 1;
+        while (this.items[i]?.disabled && tries <= itemCount) {
+            tries++;
+            i = (i + (prev ? -1 : 1));
+            if (i > itemCount) {
+                return this.findFocusableItem(0, false, tries);
+            }
+            else if (i < 0) {
+                return this.findFocusableItem(itemCount, true, tries);
+            }
+        }
+        return this.items[i] ?? null;
+    }
+    // Note, this is async to allow the event to bubble to user code, which
+    // may call `preventDefault`. If it does, avoid performing the tabs action
+    // which is selecting a new tab. Sometimes, the native event must be
+    // prevented to avoid, for example, scrolling. In this case, the event is
+    // patched to be able to detect if the user calls prevent default.
+    // Alternatively, the event could be stopped and re-dispatched synchroously,
+    // but this would be complicated since the event should be re-dispatched from
+    // the initial element to potentially trigger a native action (e.g. a history
+    // navigation via a tab label), and this could result in some listener hearing
+    // 2x events.
+    async wasEventPrevented(event, preventNativeDefault = false) {
+        if (preventNativeDefault) {
+            // prevent native default to stop, e.g. scrolling.
+            event.preventDefault();
+            // reset prevention to see if user is cancelling this action.
+            Object.defineProperties(event, {
+                'defaultPrevented': { value: false, writable: true, configurable: true },
+                'preventDefault': {
+                    // Type needed for closure conformance. Using the Event type results
+                    // in a type error.
+                    value() {
+                        this.defaultPrevented = true;
+                    },
+                    writable: true,
+                    configurable: true
+                }
+            });
+        }
+        // allow event to propagate to user code.
+        await new Promise(requestAnimationFrame);
+        return event.defaultPrevented;
+    }
+    async dispatchInteraction() {
+        // wait for items to render.
+        await new Promise(requestAnimationFrame);
+        const event = new Event('change', { bubbles: true });
+        this.dispatchEvent(event);
+    }
+    willUpdate(changed) {
+        if (changed.has('selected')) {
+            this.previousSelected = changed.get('selected') ?? -1;
+        }
+        if (changed.has('variant')) {
+            this.orientation =
+                this.variant.includes('vertical') ? 'vertical' : 'horizontal';
+        }
+        if (this.itemsDirty) {
+            this.itemsDirty = false;
+            this.previousSelected = -1;
+        }
+    }
+    async updated(changed) {
+        const itemsOrVariantChanged = changed.has('itemsDirty') || changed.has('variant');
+        // sync state with items.
+        if (itemsOrVariantChanged || changed.has('disabled')) {
+            this.items.forEach((item, i) => {
+                item.selected = this.selected === i;
+                item.variant = this.variant;
+                item.disabled = this.disabled;
+            });
+        }
+        if (itemsOrVariantChanged || changed.has('selected')) {
+            if (this.previousSelectedItem !== this.selectedItem) {
+                this.previousSelectedItem?.removeAttribute(this.selectedAttribute);
+                this.selectedItem?.setAttribute(this.selectedAttribute, '');
+            }
+            if (this.selectedItem !== this.focusedItem) {
+                this.updateFocusableItem(this.selectedItem);
+            }
+            await this.scrollItemIntoView();
+        }
+    }
+    updateFocusableItem(focusableItem) {
+        for (const item of this.items) {
+            item.focusable = item === focusableItem;
+        }
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.handleSlotChange} @click=${this.handleItemClick}></slot>
+    `;
+    }
+    async handleItemClick(event) {
+        const { target } = event;
+        if (await this.wasEventPrevented(event)) {
+            return;
+        }
+        const item = target.closest(`${this.localName} > *`);
+        const i = this.items.indexOf(item);
+        if (i > -1 && this.selected !== i) {
+            this.selected = i;
+            this.updateFocusableItem(this.selectedItem);
+            // note, Safari will not focus the button here, but if focus is manually
+            // triggered, this can match focus-visible and show the focus-ring,
+            // so avoid the temptation to cal focus!
+            await this.dispatchInteraction();
+        }
+    }
+    handleSlotChange() {
+        this.itemsDirty = true;
+    }
+    async itemsUpdateComplete() {
+        for (const item of this.items) {
+            await item.updateComplete;
+        }
+        return true;
+    }
+    // ensures the given item is visible in view; defaults to the selected item
+    async scrollItemIntoView(item = this.selectedItem) {
+        if (!item) {
+            return;
+        }
+        // wait for items to render.
+        await this.itemsUpdateComplete();
+        const isVertical = this.orientation === 'vertical';
+        const offset = isVertical ? item.offsetTop : item.offsetLeft;
+        const extent = isVertical ? item.offsetHeight : item.offsetWidth;
+        const scroll = isVertical ? this.scrollTop : this.scrollLeft;
+        const hostExtent = isVertical ? this.offsetHeight : this.offsetWidth;
+        const min = offset - this.scrollMargin;
+        const max = offset + extent - hostExtent + this.scrollMargin;
+        const to = Math.min(min, Math.max(max, scroll));
+        const behavior = 
+        // type annotation because `instant` is valid but not included in type.
+        this.focusedItem !== undefined ? 'smooth' : 'instant';
+        this.scrollTo({
+            behavior,
+            [isVertical ? 'left' : 'top']: 0,
+            [isVertical ? 'top' : 'left']: to
+        });
+    }
+}
+/** @nocollapse */
+Tabs.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ reflect: true })
+], Tabs.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], Tabs.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], Tabs.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'select-on-focus' })
+], Tabs.prototype, "selectOnFocus", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'md-tab', flatten: true })
+], Tabs.prototype, "items", void 0);
+__decorate([
+    state()
+], Tabs.prototype, "itemsDirty", void 0);
+//# sourceMappingURL=tabs.js.map