@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/segmentedbutton/lib/_segmented-button-theme.scss

@@ -1,316 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
-
-@use 'sass:map';
-@use '@material/web/sass/color';
-@use '@material/web/sass/typography';
-@use '@material/web/ripple/ripple-theme';
-
-@mixin unselected-ripple($ripple) {
-  &.md3-segmented-button--unselected {
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: map.get($ripple, 'focus-state-layer-color'),
-        focus-state-layer-opacity: map.get($ripple, 'focus-state-layer-opacity'),
-        hover-state-layer-color: map.get($ripple, 'hover-state-layer-color'),
-        hover-state-layer-opacity: map.get($ripple, 'hover-state-layer-opacity'),
-        pressed-state-layer-color: map.get($ripple, 'pressed-state-layer-color'),
-        pressed-state-layer-opacity:
-          map.get($ripple, 'pressed-state-layer-opacity'),
-      )
-    );
-  }
-}
-
-@mixin selected-ripple($ripple) {
-  &.md3-segmented-button--selected {
-    @include ripple-theme.theme(
-      (
-        focus-state-layer-color: map.get($ripple, 'focus-state-layer-color'),
-        focus-state-layer-opacity: map.get($ripple, 'focus-state-layer-opacity'),
-        hover-state-layer-color: map.get($ripple, 'hover-state-layer-color'),
-        hover-state-layer-opacity: map.get($ripple, 'hover-state-layer-opacity'),
-        pressed-state-layer-color: map.get($ripple, 'pressed-state-layer-color'),
-        pressed-state-layer-opacity:
-          map.get($ripple, 'pressed-state-layer-opacity'),
-      )
-    );
-  }
-}
-
-///
-/// Container color applies the given color to the segmented button container.
-/// @param {Color} $color - the color to apply.
-///
-@mixin container-color($color) {
-  &.md3-segmented-button--selected:enabled {
-    background-color: $color;
-  }
-}
-
-///
-/// Outline color applies the given color to the segmented button outline.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'disabled').
-///
-@mixin outline-colors($colors) {
-  .md3-segmented-button__outline {
-    border-color: map.get($colors, 'default');
-  }
-
-  &:disabled .md3-segmented-button__outline {
-    border-color: map.get($colors, 'disabled');
-  }
-}
-
-///
-/// Unselected icon colors sets the color of the icon in the unselected state.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
-///
-@mixin unselected-icon-colors($colors) {
-  @include _icon-color(map.get($colors, 'default'));
-
-  &:hover {
-    @include _icon-color(map.get($colors, 'hover'));
-  }
-
-  &:focus {
-    @include _icon-color(map.get($colors, 'focus'));
-  }
-
-  &:active {
-    @include _icon-color(map.get($colors, 'pressed'));
-  }
-
-  &:disabled {
-    @include _icon-color(map.get($colors, 'disabled'));
-  }
-}
-
-///
-/// Selected icon colors sets the color of the icon in the selected state.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
-///
-@mixin selected-icon-colors($colors) {
-  &.md3-segmented-button--selected {
-    @include _icon-color(map.get($colors, 'default'));
-    @include _checkmark-color(map.get($colors, 'default'));
-
-    &:hover {
-      @include _checkmark-color(map.get($colors, 'hover'));
-    }
-
-    &:focus {
-      @include _checkmark-color(map.get($colors, 'focus'));
-    }
-
-    &:active {
-      @include _checkmark-color(map.get($colors, 'pressed'));
-    }
-
-    &:disabled {
-      @include _checkmark-color(map.get($colors, 'disabled'));
-    }
-  }
-}
-
-///
-/// Icon size applies the given size to the segmented button icon and checkmark
-/// when included.
-/// @param {Number} $size - the size of the icon.
-///
-@mixin icon-size($size) {
-  .md3-segmented-button__graphic,
-  .md3-segmented-button__checkmark,
-  .md3-segmented-button__icon,
-  .md3-segmented-button__icon ::slotted([slot='icon']) {
-    height: $size;
-    width: $size;
-    font-size: $size;
-  }
-}
-
-///
-/// Visible graphic width sets the width of the graphic area when it is visible
-/// (i.e. when it has content and should take up space on the screen). The
-/// graphic should only take up space under the following conditions:
-///
-///   1. The segmented button has an icon and a label.
-///   2. The segmented button is selected and has a label and a checkmark.
-///   3. The segmented button is selected with a checkmark and an icon but has
-///      no label.
-///
-/// @param {Number} $width - the width of the visible graphic.
-///
-@mixin visible-graphic-width($width) {
-  &.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 {
-      width: $width;
-    }
-  }
-}
-
-///
-/// Checkmark color sets the color of the selected-state checkmark.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
-///
-@mixin checkmark-color($colors) {
-  .md3-segmented-button__checkmark-path {
-    stroke: $color;
-  }
-}
-
-///
-/// Text label font sets the font properties of the text label.
-/// @param {Map} $font-map - a map of font keys with font values. Accepted keys
-///     include ('font', 'size', 'tracking', weight').
-///
-@mixin text-label-font($font-map) {
-  .md3-segmented-button__label-text {
-    font-family: map.get($font-map, 'font');
-    font-size: map.get($font-map, 'size');
-    letter-spacing: map.get($font-map, 'tracking');
-    font-weight: map.get($font-map, 'weight');
-  }
-}
-
-///
-/// Unselected text label color applies the map of state keys and color values
-/// to the text label only when the button is both unselected and enabled.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
-///
-@mixin unselected-text-label-color($colors) {
-  &.md3-segmented-button--unselected:enabled {
-    @include _text-label-colors($colors);
-  }
-
-  &:disabled {
-    @include _text-label-color(map.get($colors, 'disabled'));
-  }
-}
-
-///
-/// Selected text label color applies the map of state keys and color values
-/// to the text label only when the button is both selected and enabled.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed').
-///
-@mixin selected-text-label-color($colors) {
-  &.md3-segmented-button--selected:enabled {
-    @include _text-label-colors($colors);
-  }
-}
-
-///
-/// Container start padding sets the given padding as the starting padding for
-/// the container. It uses CSS logical properties.
-/// @param {Number} $padding - the padding to use.
-///
-@mixin container-start-padding($padding) {
-  padding-inline-start: $padding;
-}
-
-///
-/// Container end padding sets the given padding as the ending padding for
-/// the container. It uses CSS logical properties.
-/// @param {Number} $padding - the padding to use.
-///
-@mixin container-end-padding($padding) {
-  padding-inline-end: $padding;
-}
-
-///
-/// Icon label color sets the color of the icon.
-/// @param {Color} $color - the color of the icon.
-///
-@mixin _icon-color($color) {
-  .md3-segmented-button__icon {
-    color: $color;
-  }
-}
-
-///
-/// Checkmark label color sets the color of the checkmark.
-/// @param {Color} $color - the color of the checkmark.
-///
-@mixin _checkmark-color($color) {
-  .md3-segmented-button__checkmark-path {
-    stroke: $color;
-  }
-}
-
-///
-/// Text label colors applies the given color map to the label text for the
-/// configured states.
-/// @param {Map} $colors - a map of state keys with color values. Accepted keys
-///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
-///
-@mixin _text-label-colors($colors) {
-  @include _text-label-color(map.get($colors, 'default'));
-
-  &:hover {
-    @include _text-label-color(map.get($colors, 'hover'));
-  }
-
-  &:focus {
-    @include _text-label-color(map.get($colors, 'focus'));
-  }
-
-  &:active {
-    @include _text-label-color(map.get($colors, 'pressed'));
-  }
-}
-
-///
-/// Text label color sets the color of the text label.
-/// @param {Color} $color - the color of the text label.
-///
-@mixin _text-label-color($color) {
-  .md3-segmented-button__label-text {
-    color: $color;
-  }
-}
-
-///
-/// Resolve theme returns the given theme with all values resolved.
-///
-@function resolve-theme($theme, $resolvers) {
-  $theme: typography.resolve-theme(
-    $theme,
-    map.get($resolvers, 'typography'),
-    'label-text'
-  );
-  $theme: _flatten-disabled-colors($theme);
-  @return $theme;
-}
-
-@function _flatten-disabled-colors($theme) {
-  @return color.join-color-and-opacity-pairs(
-    $theme,
-    (
-      (
-        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/_segmented-button.scss

@@ -1,159 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
-
-@use '@material/web/motion/animation';
-@use '@material/web/sass/touch-target';
-
-@mixin static-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;
-  }
-
-  .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;
-    }
-  }
-}

package/segmentedbutton/lib/segmented-button-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 `@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:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle}.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{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.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:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.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{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:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.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--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=segmented-button-styles.css.map */
-`;
-//# sourceMappingURL=segmented-button-styles.css.js.map

package/segmentedbutton/lib/segmented-button-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"segmented-button-styles.css.js","sourceRoot":"","sources":["segmented-button-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`@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:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle}.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{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.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:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.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{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:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.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--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=segmented-button-styles.css.map */\n`;\n "]}

package/segmentedbuttonset/lib/_outlined-segmented-button-set-theme.scss

@@ -1,53 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/theme';
-@use '@material/web/tokens';
-
-@use './segmented-button-set-theme';
-
-$light-theme: tokens.md-comp-outlined-segmented-button-values();
-
-$dark-theme: tokens.md-comp-outlined-segmented-button-values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  )
-);
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles(
-    $light-theme,
-    $theme,
-    $require-all: false
-  );
-  $theme: segmented-button-set-theme.resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, 'segmented-button');
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles(
-    $light-theme,
-    $theme,
-    $require-all: false
-  );
-  $theme: segmented-button-set-theme.resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, 'segmented-button');
-
-  @include segmented-button-set-theme.container-height(
-    map.get($theme, 'container-height')
-  );
-
-  @include segmented-button-set-theme.container-shape(
-    (
-      'start-start': map.get($theme, 'shape-start-start'),
-      'end-start': map.get($theme, 'shape-end-start'),
-      'start-end': map.get($theme, 'shape-start-end'),
-      'end-end': map.get($theme, 'shape-end-end'),
-    )
-  );
-}

package/segmentedbuttonset/lib/_segmented-button-set-theme.scss

@@ -1,41 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@use 'sass:map';
-@use '@material/web/sass/shape';
-
-///
-/// Container height sets the height of the container.
-/// @param {Number} $height - the height of the container.
-///
-@mixin container-height($height) {
-  height: $height;
-}
-
-///
-/// Container shape sets the shape of the container.
-/// @param {Map} $shape - a map of CSS logical radius keys with number values.
-///     Accepted keys include ('start-start', 'end-start', 'start-end',
-///     'end-end').
-///
-@mixin container-shape($shape) {
-  ::slotted(:first-child) {
-    border-start-start-radius: map.get($shape, 'start-start');
-    border-end-start-radius: map.get($shape, 'end-start');
-  }
-
-  ::slotted(:last-child) {
-    border-start-end-radius: map.get($shape, 'start-end');
-    border-end-end-radius: map.get($shape, 'end-end');
-  }
-}
-
-///
-/// Resolve theme returns the given theme with all values resolved.
-///
-@function resolve-theme($theme, $resolvers) {
-  $theme: shape.resolve-theme($theme, map.get($resolvers, 'shape'), 'shape');
-  @return $theme;
-}

package/segmentedbuttonset/lib/_segmented-button-set.scss

@@ -1,21 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
-
-@mixin static-styles() {
-  :host {
-    display: flex;
-    outline: none;
-  }
-
-  .md3-segmented-button-set {
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    grid-auto-rows: auto;
-    width: 100%;
-  }
-}