@material/web 1.0.0-pre.8 → 1.0.0

package/labs/segmentedbutton/outlined-segmented-button.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OutlinedSegmentedButton } from './internal/outlined-segmented-button.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+/**
+ * MdOutlinedSegmentedButton is the custom element for the Material
+ * Design outlined segmented button component.
+ * @final
+ * @suppress {visibility}
+ */
+export let MdOutlinedSegmentedButton = class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {
+};
+MdOutlinedSegmentedButton.styles = [sharedStyles, outlinedStyles];
+MdOutlinedSegmentedButton = __decorate([
+    customElement('md-outlined-segmented-button')
+], MdOutlinedSegmentedButton);
+//# sourceMappingURL=outlined-segmented-button.js.map

package/labs/segmentedbutton/outlined-segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,WAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,AAAjC,CAAkC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButton} from './internal/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/labs/segmentedbuttonset/internal/_outlined-segmented-button-set.scss

@@ -0,0 +1,53 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-outlined-segmented-button-supported-tokens,
+    ('shape-start-start', 'shape-start-end', 'shape-end-end', 'shape-end-start')
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-segmented-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-segmented-button-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-segmented-button-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_shape-start-start: var(
+      --md-outlined-segmented-button-shape-start-start,
+      var(--_shape)
+    );
+    --_shape-start-end: var(
+      --md-outlined-segmented-button-shape-start-end,
+      var(--_shape)
+    );
+    --_shape-end-end: var(
+      --md-outlined-segmented-button-shape-end-end,
+      var(--_shape)
+    );
+    --_shape-end-start: var(
+      --md-outlined-segmented-button-shape-end-start,
+      var(--_shape)
+    );
+  }
+}

package/labs/segmentedbuttonset/internal/outlined-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-outlined-segmented-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-segmented-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-segmented-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-segmented-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_shape-start-start: var( --md-outlined-segmented-button-shape-start-start, var(--_shape) );--_shape-start-end: var( --md-outlined-segmented-button-shape-start-end, var(--_shape) );--_shape-end-end: var( --md-outlined-segmented-button-shape-end-end, var(--_shape) );--_shape-end-start: var( --md-outlined-segmented-button-shape-end-start, var(--_shape) )}/*# sourceMappingURL=outlined-styles.css.map */
+`;
+//# sourceMappingURL=outlined-styles.css.js.map

package/labs/segmentedbuttonset/internal/outlined-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-outlined-segmented-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-segmented-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-segmented-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-segmented-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_shape-start-start: var( --md-outlined-segmented-button-shape-start-start, var(--_shape) );--_shape-start-end: var( --md-outlined-segmented-button-shape-start-end, var(--_shape) );--_shape-end-end: var( --md-outlined-segmented-button-shape-end-end, var(--_shape) );--_shape-end-start: var( --md-outlined-segmented-button-shape-end-start, var(--_shape) )}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/labs/segmentedbuttonset/internal/segmented-button-set.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+import { SegmentedButton } from '../../segmentedbutton/internal/segmented-button.js';
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ */
+export declare class SegmentedButtonSet extends LitElement {
+    multiselect: boolean;
+    buttons: SegmentedButton[];
+    getButtonDisabled(index: number): boolean;
+    setButtonDisabled(index: number, disabled: boolean): void;
+    getButtonSelected(index: number): boolean;
+    setButtonSelected(index: number, selected: boolean): void;
+    private handleSegmentedButtonInteraction;
+    private toggleSelection;
+    private indexOutOfBounds;
+    private emitSelectionEvent;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected getRenderClasses(): {};
+}

package/labs/segmentedbuttonset/internal/segmented-button-set.js

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+/**
+ * SegmentedButtonSet is the parent component for two or more
+ * `SegmentedButton` components. **Only** `SegmentedButton` components may be
+ * used as children.
+ */
+export class SegmentedButtonSet extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.multiselect = false;
+    }
+    getButtonDisabled(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].disabled;
+    }
+    setButtonDisabled(index, disabled) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.buttons[index].disabled = disabled;
+    }
+    getButtonSelected(index) {
+        if (this.indexOutOfBounds(index))
+            return false;
+        return this.buttons[index].selected;
+    }
+    setButtonSelected(index, selected) {
+        // Ignore out-of-index values.
+        if (this.indexOutOfBounds(index))
+            return;
+        // Ignore disabled buttons.
+        if (this.getButtonDisabled(index))
+            return;
+        if (this.multiselect) {
+            this.buttons[index].selected = selected;
+            this.emitSelectionEvent(index);
+            return;
+        }
+        // Single-select segmented buttons are not unselectable.
+        if (!selected)
+            return;
+        this.buttons[index].selected = true;
+        this.emitSelectionEvent(index);
+        // Deselect all other buttons for single-select.
+        for (let i = 0; i < this.buttons.length; i++) {
+            if (i === index)
+                continue;
+            this.buttons[i].selected = false;
+        }
+    }
+    handleSegmentedButtonInteraction(event) {
+        const index = this.buttons.indexOf(event.target);
+        this.toggleSelection(index);
+    }
+    toggleSelection(index) {
+        if (this.indexOutOfBounds(index))
+            return;
+        this.setButtonSelected(index, !this.buttons[index].selected);
+    }
+    indexOutOfBounds(index) {
+        return index < 0 || index >= this.buttons.length;
+    }
+    emitSelectionEvent(index) {
+        this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {
+            detail: {
+                button: this.buttons[index],
+                selected: this.buttons[index].selected,
+                index,
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+     <span
+       role="group"
+       @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
+       aria-label=${ariaLabel || nothing}
+       class="md3-segmented-button-set">
+       <slot></slot>
+     </span>
+     `;
+    }
+    getRenderClasses() {
+        return {};
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(SegmentedButtonSet);
+})();
+__decorate([
+    property({ type: Boolean })
+], SegmentedButtonSet.prototype, "multiselect", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], SegmentedButtonSet.prototype, "buttons", void 0);
+//# sourceMappingURL=segmented-button-set.js.map

package/labs/segmentedbuttonset/internal/segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {SegmentedButton} from '../../segmentedbutton/internal/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n */\nexport class SegmentedButtonSet extends LitElement {\n  static {\n    requestUpdateOnAriaChange(SegmentedButtonSet);\n  }\n\n  @property({type: Boolean}) multiselect = false;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(event: CustomEvent) {\n    const index = this.buttons.indexOf(event.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n     <span\n       role=\"group\"\n       @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n       aria-label=${ariaLabel || nothing}\n       class=\"md3-segmented-button-set\">\n       <slot></slot>\n     </span>\n     `;\n  }\n\n  protected getRenderClasses() {\n    return {};\n  }\n}\n"]}

package/labs/segmentedbuttonset/outlined-segmented-button-set.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;
+    }
+}
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+    static styles: import("lit").CSSResult[];
+}

package/labs/segmentedbuttonset/outlined-segmented-button-set.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { OutlinedSegmentedButtonSet } from './internal/outlined-segmented-button-set.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+/**
+ * MdOutlinedSegmentedButtonSet is the custom element for the Material
+ * Design outlined segmented button set component.
+ * @final
+ * @suppress {visibility}
+ */
+export let MdOutlinedSegmentedButtonSet = class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {
+};
+MdOutlinedSegmentedButtonSet.styles = [sharedStyles, outlinedStyles];
+MdOutlinedSegmentedButtonSet = __decorate([
+    customElement('md-outlined-segmented-button-set')
+], MdOutlinedSegmentedButtonSet);
+//# sourceMappingURL=outlined-segmented-button-set.js.map

package/labs/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,6CAA6C,CAAC;AACvF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;;GAKG;AAEI,WAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,AAAjC,CAAkC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './internal/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/list/_list-item.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/listitem/list-item' show theme;
+@forward './internal/listitem/list-item' show theme;

package/list/_list.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/list' show theme;
+@forward './internal/list' show theme;

package/list/harness.d.ts

@@ -4,9 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { List } from './lib/list.js';
-import { ListItemHarness } from './lib/listitem/harness.js';
-export { ListItemHarness } from './lib/listitem/harness.js';
+import { List } from './internal/list.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
+declare const NAVIGABLE_KEYS: {
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowUp: "ArrowUp";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+/**
+ * Keys that are handled by MdList. Keys not included in this are not handled by
+ * MdList and should be dispatched by yourself.
+ */
+export type HandledListKeys = typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];
 /**
  * Test harness for list.
  */
@@ -14,7 +25,20 @@ export declare class ListHarness extends Harness<List> {
     /**
      * Returns the first list item element.
      */
-    protected getInteractiveElement(): Promise<HTMLElement>;
+    protected getInteractiveElement(): Promise<List>;
     /** @return List item harnesses. */
     getItems(): ListItemHarness[];
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    pressHandledKey<T extends string = HandledListKeys>(key: T): Promise<void>;
+    /**
+     * Dispatches a keypress on the list. It may or may not be a supported event.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    keypress(key: string, init?: KeyboardEventInit): Promise<void>;
 }

package/list/harness.js

@@ -4,8 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { ListItemHarness } from './lib/listitem/harness.js';
-export { ListItemHarness } from './lib/listitem/harness.js';
+import { ListItemHarness } from './internal/listitem/harness.js';
+export { ListItemHarness } from './internal/listitem/harness.js';
+const NAVIGABLE_KEYS = {
+    'ArrowDown': 'ArrowDown',
+    'ArrowUp': 'ArrowUp',
+    'Home': 'Home',
+    'End': 'End',
+};
 /**
  * Test harness for list.
  */
@@ -15,11 +21,29 @@ export class ListHarness extends Harness {
      */
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return (await this.getItems())[0].getInteractiveElement();
+        return this.element;
     }
     /** @return List item harnesses. */
     getItems() {
         return this.element.items.map((item) => new ListItemHarness(item));
     }
+    /**
+     * Constructs keyboard events that are handled by List and makes sure that
+     * they are constructed in a manner that List understands.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async pressHandledKey(key) {
+        await this.keypress(key, { code: key });
+    }
+    /**
+     * Dispatches a keypress on the list. It may or may not be a supported event.
+     *
+     * @param key The key to dispatch on the list.
+     */
+    async keypress(key, init = {}) {
+        init = { code: key, ...init };
+        await super.keypress(key, init);
+    }
 }
 //# sourceMappingURL=harness.js.map

package/list/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAC5D,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './lib/list.js';\nimport {ListItemHarness} from './lib/listitem/harness.js';\n\nexport {ListItemHarness} from './lib/listitem/harness.js';\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (await this.getItems())[0].getInteractiveElement();\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map((item) => new ListItemHarness(item));\n  }\n}\n"]}
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAG9C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,cAAc,GAAG;IACrB,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;CACJ,CAAC;AASX;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,OAAa;IAC5C;;OAEG;IACgB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAe,CAAC;IAC9B,CAAC;IAED,mCAAmC;IACnC,QAAQ;QACN,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CACzB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,IAAkB,CAAC,CAAC,CAAC;IACzD,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,eAAe,CAAqC,GAAM;QAC9D,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAC,IAAI,EAAE,GAAG,EAAC,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACM,KAAK,CAAC,QAAQ,CAAC,GAAW,EAAE,OAAO,EAAuB;QACjE,IAAI,GAAG,EAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAC,CAAC;QAC5B,MAAM,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {List} from './internal/list.js';\nimport {ListItemHarness} from './internal/listitem/harness.js';\nimport {ListItemEl} from './internal/listitem/list-item.js';\n\nexport {ListItemHarness} from './internal/listitem/harness.js';\n\nconst NAVIGABLE_KEYS = {\n  'ArrowDown': 'ArrowDown',\n  'ArrowUp': 'ArrowUp',\n  'Home': 'Home',\n  'End': 'End',\n} as const;\n\n/**\n * Keys that are handled by MdList. Keys not included in this are not handled by\n * MdList and should be dispatched by yourself.\n */\nexport type HandledListKeys =\n    typeof NAVIGABLE_KEYS[keyof typeof NAVIGABLE_KEYS];\n\n/**\n * Test harness for list.\n */\nexport class ListHarness extends Harness<List> {\n  /**\n   * Returns the first list item element.\n   */\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element as List;\n  }\n\n  /** @return List item harnesses. */\n  getItems() {\n    return this.element.items.map(\n        (item) => new ListItemHarness(item as ListItemEl));\n  }\n\n  /**\n   * Constructs keyboard events that are handled by List and makes sure that\n   * they are constructed in a manner that List understands.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  async pressHandledKey<T extends string = HandledListKeys>(key: T) {\n    await this.keypress(key, {code: key});\n  }\n\n  /**\n   * Dispatches a keypress on the list. It may or may not be a supported event.\n   *\n   * @param key The key to dispatch on the list.\n   */\n  override async keypress(key: string, init = {} as KeyboardEventInit) {\n    init = {code: key, ...init};\n    await super.keypress(key, init);\n  }\n}\n"]}

package/list/internal/_list.scss

@@ -0,0 +1,46 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+@use './listitem/list-item';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-list-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-list-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-list-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-list-#{$token}, #{$value}));
+  }
+
+  :host {
+    background: map.get($tokens, 'container-color');
+    color: unset;
+    display: flex;
+    flex-direction: column;
+    outline: none;
+    padding: 8px 0;
+    // Add position so the elevation overlay (which is absolutely positioned)
+    // can be positioned relative to the list root.
+    position: relative;
+  }
+}

package/list/internal/list-controller.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItem } from './list-navigation-helpers.js';
+/**
+ * Default keys that trigger navigation.
+ */
+export declare const NavigableKeys: {
+    readonly ArrowDown: "ArrowDown";
+    readonly ArrowLeft: "ArrowLeft";
+    readonly ArrowUp: "ArrowUp";
+    readonly ArrowRight: "ArrowRight";
+    readonly Home: "Home";
+    readonly End: "End";
+};
+/**
+ * Default set of navigable keys.
+ */
+export type NavigableKeys = typeof NavigableKeys[keyof typeof NavigableKeys];
+/**
+ * The configuration object to customize the behavior of the List Controller
+ */
+export interface ListControllerConfig<Item extends ListItem> {
+    /**
+     * A function that determines whether or not the given element is an Item
+     */
+    isItem: (item: HTMLElement) => item is Item;
+    /**
+     * A function that returns an array of elements to consider as items. For
+     * example, all the slotted elements.
+     */
+    getPossibleItems: () => HTMLElement[];
+    /**
+     * A function that returns whether or not the list is in an RTL context.
+     */
+    isRtl: () => boolean;
+    /**
+     * Deactivates an item such as setting the tabindex to -1 and or sets selected
+     * to false.
+     */
+    deactivateItem: (item: Item) => void;
+    /**
+     * Activates an item such as setting the tabindex to 1 and or sets selected to
+     * true (but does not focus).
+     */
+    activateItem: (item: Item) => void;
+    /**
+     * Whether or not the key should be handled by the list for navigation.
+     */
+    isNavigableKey: (key: string) => boolean;
+    /**
+     * Whether or not the item can be activated. Defaults to items that are not
+     * disabled.
+     */
+    isActivatable?: (item: Item) => boolean;
+}
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+export declare class ListController<Item extends ListItem> {
+    isItem: (item: HTMLElement) => item is Item;
+    private readonly getPossibleItems;
+    private readonly isRtl;
+    private readonly deactivateItem;
+    private readonly activateItem;
+    private readonly isNavigableKey;
+    private readonly isActivatable?;
+    constructor(config: ListControllerConfig<Item>);
+    /**
+     * The items being managed by the list. Additionally, attempts to see if the
+     * object has a sub-item in the `.item` property.
+     */
+    get items(): Item[];
+    /**
+     * Handles keyboard navigation. Should be bound to the node that will act as
+     * the List.
+     */
+    handleKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Activates the next item in the list. If at the end of the list, the first
+     * item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activateNextItem(): Item | null;
+    /**
+     * Activates the previous item in the list. If at the start of the list, the
+     * last item will be activated.
+     *
+     * @return The activated list item or `null` if there are no items.
+     */
+    activatePreviousItem(): Item | null;
+    /**
+     * Listener to be bound to the `deactivate-items` item event.
+     */
+    onDeactivateItems: () => void;
+    /**
+     * Listener to be bound to the `request-activation` item event..
+     */
+    onRequestActivation: (event: Event) => void;
+    /**
+     * Listener to be bound to the `slotchange` event for the slot that renders
+     * the items.
+     */
+    onSlotchange: () => void;
+}