@material/web 1.0.0-pre.8 → 1.0.0

package/sass/_var.scss

@@ -1,245 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-// go/keep-sorted end
-// go/keep-sorted start
-@use './feature-flags';
-@use './string-ext';
-// go/keep-sorted end
-
-/// Creates a custom property `var()` string according to the configured
-/// `var-fallbacks` feature flag.
-///
-/// @param {String} $name - The name of the custom property.
-/// @param {*} $fallback [null] - Optional `var()` fallback value.
-/// @return {String} A custom property `var()` string.
-@function create($name, $fallback: null) {
-  $name: create-name($name);
-  $fallback-config: feature-flags.get(var-fallbacks);
-  @if $fallback-config == none or $fallback == null {
-    @return var(#{$name});
-  }
-
-  @if is-var($fallback) {
-    $fallback-name: name($fallback);
-    $fallback-fallback: null;
-    @if $fallback-config == all {
-      $fallback-fallback: fallback($fallback);
-    }
-
-    @return var(#{$name}, create($fallback-name, $fallback-fallback));
-  }
-
-  @return var(#{$name}, $fallback);
-}
-
-/// Create a custom property variable name using the configured
-/// `var-name-prefix` feature flag.
-///
-/// Providing a custom property name with `--*` will ignore the global prefix.
-///
-/// @example - scss
-///   .foo {
-///     color: var(#{var.create-name(foo)});
-///     background: var(#{var.create-name(--bar)});
-///   }
-///
-/// @example - css
-///   .foo {
-///     color: var(--md-foo);
-///     background: var(--bar);
-///   }
-///
-/// @param {String} $name - The name of the custom property.
-/// @return {String} The full valid CSS custom property variable name.
-@function create-name($name) {
-  @if string-ext.has-prefix($name, '--') {
-    @return $name;
-  }
-
-  @return string.unquote('--#{feature-flags.get(var-name-prefix)}-#{$name}');
-}
-
-/// Returns the custom property variable name of `var()` string.
-///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
-/// @return {String} The custom property variable name.
-@function name($var) {
-  $var: _parse-and-validate($var);
-  @return map.get($var, name);
-}
-
-/// Returns the fallback value of a custom property `var()` string. The value
-/// may be null if the `var()` does not have a fallback value.
-///
-/// @example - scss
-///   $fallback: var.fallback(var(--foo, var(--bar, 8px));
-///   // "var(--bar, 8px)"
-///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
-/// @return {String} The fallback value of the `var()` string. May be null if
-///     the `var()` does not have a fallback value.
-@function fallback($var) {
-  $var: _parse-and-validate($var);
-  $fallback: map.get($var, fallback);
-  @if is-var($fallback) {
-    @return create(name($fallback), fallback($fallback));
-  }
-
-  @return $fallback;
-}
-
-/// Returns the deep fallback value of a custom property `var()` string. The
-/// value may be null if the `var()` does not have a fallback value.
-///
-/// If a fallback value is another `var()`, this function will return the final
-/// concrete value in the chain.
-///
-/// @example - scss
-///   $fallback: var.deep-fallback(var(--foo, var(--bar, 8px));
-///   // "8px"
-///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
-/// @return {String} The deep fallback value of the `var()` string. May be null
-///     if the `var()` does not have a fallback value.
-@function deep-fallback($var) {
-  $fallback: fallback($var);
-  @if is-var($fallback) {
-    @return deep-fallback($fallback);
-  }
-
-  @return $fallback;
-}
-
-/// Creates a new custom property `var()` string and returns it with the
-/// specified new fallback value.
-///
-/// @example - scss
-///   $new-var: set-fallback(var(--foo, var(--bar, 8px)), 16px);
-///   // "var(--foo, 16px)"
-///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
-/// @param {*} $new-fallback - The new fallback value. May be null to remove a
-///     value.
-/// @return {String} A custom property `var()` string with the new fallback
-///     value.
-@function set-fallback($var, $new-fallback) {
-  $name: name($var);
-  @return create($name, $new-fallback);
-}
-
-/// Creates a new custom property `var()` string and returns it with the
-/// specified new deep fallback value.
-///
-/// If the provided `var()` string's fallback value is another `var()`, this
-/// function will set the final fallback value in the chain.
-///
-/// @example - scss
-///   $new-var: deep-set-fallback(var(--foo, var(--bar, 8px)), 16px);
-///   // "var(--foo, var(--bar, 16px))"
-///
-/// @throw If the value is not a custom property.
-/// @param {String} $var - A custom property `var()` string.
-/// @param {*} $new-fallback - The new fallback value. May be null to remove a
-///     value.
-/// @return {String} A custom property `var()` string with the new deep
-///     fallback value.
-@function deep-set-fallback($var, $new-fallback) {
-  $old-fallback: fallback($var);
-  @if is-var($old-fallback) {
-    $new-fallback: deep-set-fallback($old-fallback, $new-fallback);
-  }
-
-  @return set-fallback($var, $new-fallback);
-}
-
-/// Indicates whether or not a value is a custom property `var()` string.
-///
-/// @example - scss
-///   $is-var: var.is-var('var(--foo)'); // true
-///
-/// @param {*} $var - The value to test.
-/// @return {Bool} True if the value is a custom property `var()` string, or
-///     false if not.
-@function is-var($var) {
-  @return _parse($var) != null;
-}
-
-/// Indicates whether or not a value is a `var()` string.
-///
-/// @param {*} $var - The value to test.
-/// @return {Bool} True if the value is a custom property `var()` string, or
-///     false if not.
-@function _is-var-string($var) {
-  @return meta.type-of($var) == 'string' and string-ext.has-prefix($var, 'var(');
-}
-
-/// Parses a `var()` string into a Map with `name` and `fallback` keys. This
-/// function returns null if the value is invalid.
-///
-/// @param {*} $var - The value to parse.
-/// @return {Map} A Map containing a string `name` key with the custom property
-///     name and a `fallback` key with the fallback value (which may be null).
-///     The returned Map itself may be null if the provided value is not valid.
-@function _parse($var) {
-  @if meta.type-of($var) ==
-    'map' and
-    map.has-key($var, name) and
-    map.has-key($var, fallback)
-  {
-    @return $var;
-  }
-
-  @if not _is-var-string($var) {
-    @return null;
-  }
-
-  // Remove function name and parens
-  $var: string-ext.trim($var, 'var(', ')');
-
-  $name: string-ext.trim-repeating($var, ' ');
-  $fallback: null;
-  $comma: string.index($var, ',');
-  @if $comma != null {
-    $name: string-ext.trim-repeating(string.slice($var, 1, $comma - 1), ' ');
-    $fallback: string-ext.trim-repeating(string.slice($var, $comma + 1), ' ');
-    @if _is-var-string($fallback) {
-      $fallback: _parse($fallback);
-      @if $fallback == null {
-        // Invalid var() fallback string
-        @return null;
-      }
-    }
-  }
-
-  @if $name == '' or $fallback == '' {
-    @return null;
-  }
-
-  @return (name: $name, fallback: $fallback);
-}
-
-/// Parses a `var()` string into a Map with `name` and `fallback` keys.
-///
-/// @throw If the value is not a custom property.
-/// @param {*} $var - The value to parse.
-/// @return {Map} A Map containing a string `name` key with the custom property
-///     name and a `fallback` key with the fallback value (which may be null).
-@function _parse-and-validate($var) {
-  $var-map: _parse($var);
-  @if $var-map == null {
-    @error '"#{$var}" is not a valid var() string';
-  }
-
-  @return $var-map;
-}

package/segmentedbutton/lib/_outlined-segmented-button.scss

@@ -1,46 +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.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../sass/theme';
-@use '../../tokens';
-@use './shared';
-// go/keep-sorted end
-
-@mixin styles() {
-  $tokens: tokens.md-comp-outlined-segmented-button-values();
-  // TODO(b/198759625): Remove spacing tokens once provided.
-  $tokens: map.merge(
-    $tokens,
-    (
-      'spacing-leading': 12px,
-      'spacing-trailing': 12px,
-    )
-  );
-  $tokens: shared.resolve-tokens($tokens);
-  $tokens: theme.create-theme-vars($tokens, 'segmented-button');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-  }
-
-  .md3-segmented-button__outline {
-    border-radius: inherit;
-    border-style: solid;
-    // TODO(b/233762888): Move border-width and inset into theme after generating latest version of tokens.
-    border-width: 1px;
-    inset: 0px -0.5px;
-    pointer-events: none;
-    position: absolute;
-  }
-}

package/segmentedbutton/lib/_shared.scss

@@ -1,382 +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.
-
-// go/keep-sorted start
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../motion/animation';
-@use '../../ripple/ripple';
-@use '../../sass/color';
-@use '../../sass/touch-target';
-// go/keep-sorted end
-
-@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: var(--_label-text-type);
-    }
-
-    &.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-color: var(--_unselected-hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        focus-color: var(--_unselected-focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        pressed-color: var(--_unselected-pressed-state-layer-color),
-        pressed-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-color: var(--_selected-hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        focus-color: var(--_selected-focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        pressed-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: _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-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, 29, 27, 32), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 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-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_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, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_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, 29, 27, 32), 0.38));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 0.38));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, rgb(var(--md-sys-color-on-surface-rgb, 29, 27, 32), 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-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_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, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-state-layer-color: var(--md-segmented-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-with-icon-icon-color: var(--md-segmented-button-unselected-with-icon-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_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 "]}