@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/segmentedbutton/lib/_shared.scss

@@ -1,388 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use 'sass:map';
-@use '../../motion/animation';
-@use '../../ripple/ripple';
-@use '../../sass/color';
-@use '../../sass/resolvers';
-@use '../../sass/touch-target';
-@use '../../sass/typography';
-
-@mixin styles() {
-  @keyframes md3-segmented-button-checkmark-selection-draw-in {
-    from {
-      stroke-dashoffset: 29.7833385;
-    }
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes md3-segmented-button-simple-fade-out {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  @keyframes md3-segmented-button-simple-fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  :host {
-    display: inline-flex;
-    outline: none;
-  }
-
-  .md3-segmented-button {
-    align-items: center;
-    background: transparent;
-    border: none;
-    border-radius: inherit;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    outline: none;
-    position: relative;
-    vertical-align: middle;
-    padding-inline-start: var(--_spacing-leading);
-    padding-inline-end: var(--_spacing-trailing);
-
-    .md3-segmented-button__outline {
-      border-color: var(--_outline-color);
-    }
-
-    &:disabled .md3-segmented-button__outline {
-      border-color: var(--_disabled-outline-color);
-    }
-
-    .md3-segmented-button__graphic,
-    .md3-segmented-button__checkmark,
-    .md3-segmented-button__icon,
-    .md3-segmented-button__icon ::slotted([slot='icon']) {
-      height: var(--_with-icon-icon-size);
-      width: var(--_with-icon-icon-size);
-      font-size: var(--_with-icon-icon-size);
-    }
-
-    // Under the following conditions, we need to account for extra space between
-    // the graphic and the text label/icon content:
-    //
-    //   1. A button with an icon and a label.
-    //   2. A selected button with a label and checkmark.
-    //   3. A selected button with an icon and checkmark but no label.
-    //
-    // We calculate a larger width here instead of using padding or margin for
-    // two main reasons:
-    //
-    //   1. We may need to transition between a zero width and an explicit width.
-    //   2. Both margin and padding take up space when a node has child content
-    //      even when a zero width is set and overflow is set to hidden.
-    //
-    // Because of those reasons, we calculate a new width with the given values.
-    &.md3-segmented-button--with-icon.md3-segmented-button--with-label,
-    &.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark,
-    &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark {
-      .md3-segmented-button__graphic {
-        // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
-        width: calc(var(--_with-icon-icon-size) + 8px);
-      }
-    }
-
-    .md3-segmented-button__label-text {
-      font-family: var(--_label-text-font);
-      font-size: var(--_label-text-size);
-      letter-spacing: var(--_label-text-tracking);
-      font-weight: var(--_label-text-weight);
-    }
-
-    &.md3-segmented-button--selected:enabled {
-      .md3-segmented-button__label-text {
-        color: var(--_selected-label-text-color);
-      }
-
-      &:hover {
-        .md3-segmented-button__label-text {
-          color: var(--_selected-hover-label-text-color);
-        }
-      }
-
-      &:focus {
-        .md3-segmented-button__label-text {
-          color: var(--_selected-focus-label-text-color);
-        }
-      }
-
-      &:active {
-        .md3-segmented-button__label-text {
-          color: var(--_selected-pressed-label-text-color);
-        }
-      }
-    }
-
-    &.md3-segmented-button--unselected:enabled {
-      .md3-segmented-button__label-text {
-        color: var(--_unselected-label-text-color);
-      }
-
-      &:hover {
-        .md3-segmented-button__label-text {
-          color: var(--_unselected-hover-label-text-color);
-        }
-      }
-
-      &:focus {
-        .md3-segmented-button__label-text {
-          color: var(--_unselected-focus-label-text-color);
-        }
-      }
-
-      &:active {
-        .md3-segmented-button__label-text {
-          color: var(--_unselected-pressed-label-text-color);
-        }
-      }
-    }
-
-    &:disabled {
-      .md3-segmented-button__label-text {
-        color: var(--_disabled-label-text-color);
-      }
-    }
-  }
-
-  .md3-segmented-button--unselected {
-    .md3-segmented-button__icon {
-      color: var(--_unselected-with-icon-icon-color);
-    }
-
-    &:hover {
-      .md3-segmented-button__icon {
-        color: var(--_unselected-hover-icon-color);
-      }
-    }
-
-    &:focus {
-      .md3-segmented-button__icon {
-        color: var(--_unselected-focus-icon-color);
-      }
-    }
-
-    &:active {
-      .md3-segmented-button__icon {
-        color: var(--_unselected-pressed-icon-color);
-      }
-    }
-
-    &:disabled {
-      .md3-segmented-button__icon {
-        color: var(--_disabled-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        hover-state-layer-color: var(--_unselected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-color: var(--_unselected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-color: var(--_unselected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  .md3-segmented-button--selected {
-    background-color: var(--_selected-container-color);
-
-    .md3-segmented-button__icon {
-      color: var(--_selected-with-icon-icon-color);
-    }
-
-    .md3-segmented-button__checkmark-path {
-      stroke: var(--_selected-with-icon-icon-color);
-    }
-
-    &:hover {
-      .md3-segmented-button__checkmark-path {
-        stroke: var(--_selected-hover-icon-color);
-      }
-    }
-
-    &:focus {
-      .md3-segmented-button__checkmark-path {
-        stroke: var(--_selected-focus-icon-color);
-      }
-    }
-
-    &:active {
-      .md3-segmented-button__checkmark-path {
-        stroke: var(--_selected-pressed-icon-color);
-      }
-    }
-
-    &:disabled {
-      .md3-segmented-button__checkmark-path {
-        stroke: var(--_disabled-icon-color);
-      }
-    }
-
-    @include ripple.theme(
-      (
-        hover-state-layer-color: var(--_selected-hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        focus-state-layer-color: var(--_selected-focus-state-layer-color),
-        focus-state-layer-opacity: var(--_focus-state-layer-opacity),
-        pressed-state-layer-color: var(--_selected-pressed-state-layer-color),
-        pressed-state-layer-opacity: var(--_pressed-state-layer-opacity),
-      )
-    );
-  }
-
-  .md3-segmented-button:enabled {
-    cursor: pointer;
-  }
-
-  .md3-segmented-button__focus-ring {
-    z-index: 1;
-  }
-
-  .md3-segmented-button__ripple {
-    border-radius: inherit;
-    z-index: 0;
-  }
-
-  .md3-segmented-button__touch {
-    @include touch-target.touch-target($width: 100%);
-  }
-
-  .md3-segmented-button__leading,
-  .md3-segmented-button__graphic {
-    display: inline-flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .md3-segmented-button__graphic {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .md3-segmented-button__graphic {
-    transition: animation.standard(width, 150ms);
-  }
-
-  .md3-segmented-button--unselected.md3-segmented-button--with-label,
-  .md3-segmented-button--unselected.md3-segmented-button--without-label,
-  .md3-segmented-button--selected.md3-segmented-button--without-checkmark {
-    .md3-segmented-button__graphic {
-      width: 0;
-    }
-  }
-
-  .md3-segmented-button--unselected .md3-segmented-button__checkmark {
-    opacity: 0;
-  }
-
-  .md3-segmented-button--selected.md3-segmented-button--with-label {
-    .md3-segmented-button__icon {
-      opacity: 0;
-    }
-  }
-
-  .md3-segmented-button--with-label .md3-segmented-button__checkmark {
-    display: inline-flex;
-    position: absolute;
-  }
-
-  .md3-segmented-button__checkmark-path {
-    stroke-width: 2px;
-    stroke-dasharray: 29.7833385;
-  }
-
-  .md3-segmented-button--selecting {
-    .md3-segmented-button__checkmark-path {
-      // We immediately render the checkmark in the animation start treatment
-      // because we're using an animation delay. If we didn't have the delay,
-      // the checkmark would render in the base fully-drawn state during the
-      // brief animation-delay period which would look wrong.
-      stroke-dashoffset: 29.7833385;
-      animation: md3-segmented-button-checkmark-selection-draw-in;
-      animation-duration: 150ms;
-      animation-delay: 50ms;
-      animation-fill-mode: forwards;
-      animation-timing-function: animation.$standard-easing;
-    }
-    &.md3-segmented-button--with-label .md3-segmented-button__icon {
-      animation: md3-segmented-button-simple-fade-out;
-      animation-duration: 75ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-    }
-  }
-
-  .md3-segmented-button--deselecting {
-    .md3-segmented-button__checkmark {
-      animation: md3-segmented-button-simple-fade-out;
-      animation-duration: 50ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-    }
-    &.md3-segmented-button--with-label .md3-segmented-button__icon {
-      // We immediately render the icon in the animation start treatment
-      // because we're using an animation delay. If we didn't have the delay,
-      // the icon would render with full opacity during the brief
-      // animation-delay period which would look wrong.
-      opacity: 0;
-      animation: md3-segmented-button-simple-fade-in;
-      animation-delay: 50ms;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-    }
-  }
-}
-
-@function resolve-tokens($tokens) {
-  $tokens: typography.resolve-theme(
-    $tokens,
-    map.get(resolvers.$material, 'typography'),
-    'label-text'
-  );
-  $tokens: _flatten-disabled-colors($tokens);
-  @return $tokens;
-}
-
-@function _flatten-disabled-colors($tokens) {
-  @return color.join-color-and-opacity-pairs(
-    $tokens,
-    (
-      (
-        color-key: 'disabled-container-color',
-        opacity-key: 'disabled-container-opacity'
-      ),
-      (
-        color-key: 'disabled-label-text-color',
-        opacity-key: 'disabled-label-text-opacity'
-      ),
-      (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
-      (
-        color-key: 'disabled-outline-color',
-        opacity-key: 'disabled-outline-opacity'
-      )
-    )
-  );
-}

package/segmentedbutton/lib/outlined-segmented-button.d.ts

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-import { SegmentedButton } from './segmented-button.js';
-/** @soyCompatible */
-export declare class OutlinedSegmentedButton extends SegmentedButton {
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected renderOutline(): TemplateResult;
-}

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

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { html } from 'lit';
-import { SegmentedButton } from './segmented-button.js';
-/** @soyCompatible */
-export class OutlinedSegmentedButton extends SegmentedButton {
-    /** @soyTemplate */
-    getRenderClasses() {
-        return {
-            ...super.getRenderClasses(),
-            'md3-segmented-button--outlined': true,
-        };
-    }
-    /** @soyTemplate */
-    renderOutline() {
-        return html `<span class="md3-segmented-button__outline"></span>`;
-    }
-}
-//# sourceMappingURL=outlined-segmented-button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AAEtD,qBAAqB;AACrB,MAAM,OAAO,uBAAwB,SAAQ,eAAe;IAC1D,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,gCAAgC,EAAE,IAAI;SACvC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,aAAa;QAC9B,OAAO,IAAI,CAAA,qDAAqD,CAAC;IACnE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {SegmentedButton} from './segmented-button.js';\n\n/** @soyCompatible */\nexport class OutlinedSegmentedButton extends SegmentedButton {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button--outlined': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderOutline(): TemplateResult {\n    return html`<span class=\"md3-segmented-button__outline\"></span>`;\n  }\n}"]}

package/segmentedbutton/lib/outlined-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_container-height: var(--md-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
-`;
-//# sourceMappingURL=outlined-styles.css.js.map

package/segmentedbutton/lib/outlined-styles.css.js.map

@@ -1 +0,0 @@
-{"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-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.12));--_focus-state-layer-opacity: var(--md-segmented-button-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-segmented-button-label-text-font, Roboto);--_label-text-line-height: var(--md-segmented-button-label-text-line-height, 1.25rem);--_label-text-size: var(--md-segmented-button-label-text-size, 0.875rem);--_label-text-tracking: var(--md-segmented-button-label-text-tracking, 0.006rem);--_label-text-type: var(--md-segmented-button-label-text-type, 500 0.875rem / 1.25rem Roboto);--_label-text-weight: var(--md-segmented-button-label-text-weight, 500);--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-segmented-button-outline-width, 1px);--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-state-layer-color: var(--md-segmented-button-selected-focus-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-with-icon-icon-color: var(--md-segmented-button-selected-with-icon-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_with-icon-icon-size: var(--md-segmented-button-with-icon-icon-size, 18px);--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/segmentedbutton/lib/outlined-styles.scss

@@ -1,8 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use './outlined-segmented-button';
-
-@include outlined-segmented-button.styles;

package/segmentedbutton/lib/segmented-button.d.ts

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import '../../focus/focus-ring.js';
-import { PropertyValues, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-import { ActionElement, BeginPressConfig, EndPressConfig } from '../../actionelement/action-element.js';
-import { MdRipple } from '../../ripple/ripple.js';
-/**
- * SegmentedButton is a web component implementation of the Material Design
- * segmented button component. It is intended **only** for use as a child of a
- * `SementedButtonSet` component. It is **not** intended for use in any other
- * context.
- * @soyCompatible
- */
-export declare class SegmentedButton extends ActionElement {
-    disabled: boolean;
-    selected: boolean;
-    label: string;
-    noCheckmark: boolean;
-    hasIcon: boolean;
-    /** @soyPrefixAttribute */
-    ariaLabel: string;
-    protected animState: string;
-    protected showFocusRing: boolean;
-    protected iconElement: HTMLElement[];
-    ripple: MdRipple;
-    protected update(props: PropertyValues<SegmentedButton>): void;
-    private nextAnimationState;
-    beginPress({ positionEvent }: BeginPressConfig): void;
-    endPress(options: EndPressConfig): void;
-    handlePointerDown(e: PointerEvent): void;
-    handlePointerUp(e: PointerEvent): void;
-    protected handlePointerEnter(e: PointerEvent): void;
-    handlePointerLeave(e: PointerEvent): void;
-    protected handleFocus(): void;
-    protected handleBlur(): void;
-    /** @soyTemplate */
-    render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    /** @soyTemplate */
-    protected renderFocusRing(): TemplateResult;
-    /** @soyTemplate */
-    protected renderRipple(): TemplateResult | string;
-    /** @soyTemplate */
-    protected renderOutline(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLeading(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLeadingWithoutLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLeadingWithLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderLabel(): TemplateResult;
-    /** @soyTemplate */
-    protected renderTouchTarget(): TemplateResult;
-}