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

package/field/lib/_outlined-field-theme.scss

@@ -1,311 +0,0 @@
-//
-// Copyright 2021 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 'sass:string';
-@use '@material/web/sass/resolvers';
-@use '@material/web/sass/shape';
-@use '@material/web/sass/theme';
-@use '@material/web/sass/var';
-@use '@material/web/tokens';
-@use './content-theme';
-@use './field-theme';
-@use './label-theme';
-@use './supporting-text-theme';
-
-$_default-deps: (
-  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
-  md-sys-shape: tokens.md-sys-shape-values(),
-  md-sys-state: tokens.md-sys-state-values(),
-  md-sys-typescale: tokens.md-sys-typescale-values(),
-);
-
-@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
-  $text-field-values: tokens.md-comp-outlined-text-field-values(
-    $deps,
-    $exclude-hardcoded-values
-  );
-  // TODO(b/203778922): Remove *-type when type composite tokens are removed
-  // Remove unused tokens.
-  $values: map.remove(
-    $text-field-values,
-    caret-color,
-    disabled-input-text-color,
-    disabled-input-text-opacity,
-    error-focus-caret-color,
-    error-focus-input-text-color,
-    error-hover-input-text-color,
-    error-input-text-color,
-    focus-input-text-color,
-    hover-input-text-color,
-    input-text-color,
-    input-text-font,
-    input-text-line-height,
-    input-text-size,
-    input-text-tracking,
-    input-text-type,
-    input-text-weight,
-    label-text-type,
-    supporting-text-type
-  );
-
-  // Add missing tokens.
-  $values: map.merge(
-    $values,
-    (
-      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
-      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
-      content-color: map.get($text-field-values, input-text-color),
-      disabled-content-color:
-        map.get($text-field-values, disabled-input-text-color),
-      disabled-content-opacity:
-        map.get($text-field-values, disabled-input-text-opacity),
-      error-content-color: map.get($text-field-values, error-input-text-color),
-      error-focus-content-color:
-        map.get($text-field-values, error-focus-input-text-color),
-      error-hover-content-color:
-        map.get($text-field-values, error-hover-input-text-color),
-      focus-content-color: map.get($text-field-values, focus-input-text-color),
-      hover-content-color: map.get($text-field-values, hover-input-text-color),
-      label-text-padding-bottom: if($exclude-hardcoded-values, null, 8px),
-      outline-label-padding: if($exclude-hardcoded-values, null, 4px),
-      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
-      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
-    )
-  );
-
-  @return $values;
-}
-
-$light-theme: values();
-$dark-theme: values(
-  (
-    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
-  ),
-  $exclude-hardcoded-values: true
-);
-
-@function _resolve-theme($theme, $resolvers) {
-  $theme: label-theme.resolve-theme($theme, $resolvers);
-  $theme: supporting-text-theme.resolve-theme($theme, $resolvers);
-  $theme: shape.resolve-theme(
-    $theme,
-    map.get($resolvers, shape),
-    container-shape
-  );
-  @return $theme;
-}
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  // Add resolved tokens so that $theme may specify them.
-  $reference: map.merge($light-theme, _resolve-theme($light-theme, $resolvers));
-  $theme: theme.validate-theme($reference, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, outlined-field);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: _resolve-theme($theme, $resolvers);
-  $theme: theme.create-theme-vars($theme, outlined-field);
-
-  @include field-theme.theme-styles($theme);
-  @include content-theme.theme-styles($theme);
-  @include label-theme.theme-styles($theme);
-  @include supporting-text-theme.theme-styles($theme);
-
-  .md3-field__label--floating {
-    // Center the label within the outline stroke
-    transform: translateY(
-      calc(-100% + map.get($theme, label-text-padding-bottom))
-    );
-  }
-
-  @include _container-padding-horizontal($theme);
-  @include _container-shape(
-    (
-      start-start: map.get($theme, container-shape-start-start),
-      start-end: map.get($theme, container-shape-start-end),
-      end-end: map.get($theme, container-shape-end-end),
-      end-start: map.get($theme, container-shape-end-start),
-    )
-  );
-  @include _outline-color(
-    (
-      default: map.get($theme, outline-color),
-      disabled: map.get($theme, disabled-outline-color),
-      focus: map.get($theme, focus-outline-color),
-      hover: map.get($theme, hover-outline-color),
-    )
-  );
-  @include _outline-error-color(
-    (
-      default: map.get($theme, error-outline-color),
-      focus: map.get($theme, error-focus-outline-color),
-      hover: map.get($theme, error-hover-outline-color),
-    )
-  );
-  @include _outline-label-padding(map.get($theme, outline-label-padding));
-  @include _outline-opacity(
-    (
-      disabled: map.get($theme, disabled-outline-opacity),
-    )
-  );
-  @include _outline-notch-max-width(
-    map.get($theme, container-padding-horizontal)
-  );
-  @include _outline-width(
-    (
-      default: map.get($theme, outline-width),
-      disabled: map.get($theme, disabled-outline-width),
-      focus: map.get($theme, focus-outline-width),
-      hover: map.get($theme, hover-outline-width),
-    )
-  );
-}
-
-@mixin _container-padding-horizontal($theme) {
-  // Add padding that will grow to compensate for the outline's shape.
-  // This is needed to prevent the outline border from clipping with the label
-  // and is mirrored in the container padding to align the content and resting
-  // label with the adjusted floating label.
-  $padding: map.get($theme, container-padding-horizontal);
-  $shape-start: max(
-    map.get($theme, container-shape-start-start),
-    map.get($theme, container-shape-end-start)
-  );
-  $shape-end: max(
-    map.get($theme, container-shape-start-end),
-    map.get($theme, container-shape-end-end)
-  );
-  $label-padding: map.get($theme, outline-label-padding);
-
-  .md3-field__outline-start,
-  &:not(.md3-field--with-start) .md3-field__start {
-    padding-inline-start: max($padding, $shape-start + $label-padding);
-  }
-
-  &:not(.md3-field--with-end) {
-    .md3-field__end {
-      padding-inline-end: max($padding, $shape-end);
-    }
-  }
-}
-
-@mixin _container-shape($shape) {
-  .md3-field__outline {
-    border-start-start-radius: map.get($shape, start-start);
-    border-start-end-radius: map.get($shape, start-end);
-    border-end-end-radius: map.get($shape, end-end);
-    border-end-start-radius: map.get($shape, end-start);
-  }
-}
-
-@mixin _outline-label-padding($padding) {
-  .md3-field__outline-start::before,
-  .md3-field__outline-start::after {
-    margin-inline-end: $padding;
-  }
-
-  .md3-field__outline-notch {
-    padding: 0 $padding;
-    margin-inline-start: calc(-1 * #{$padding});
-    margin-inline-end: $padding;
-  }
-
-  .md3-field__outline-end {
-    margin-inline-start: calc(-1 * #{$padding});
-  }
-}
-
-@mixin _outline-notch-max-width($container-padding-horizontal) {
-  .md3-field__outline-notch {
-    max-width: calc(100% - 2 * #{$container-padding-horizontal});
-  }
-}
-
-@mixin _outline-color($colors) {
-  @include _set-outline-color(map.get($colors, default));
-
-  &:hover {
-    @include _set-outline-color(map.get($colors, hover));
-  }
-
-  &.md3-field--focused {
-    @include _set-outline-color(map.get($colors, focus));
-  }
-
-  &.md3-field--disabled {
-    @include _set-outline-color(map.get($colors, disabled));
-  }
-}
-
-@mixin _set-outline-color($color) {
-  .md3-field__outline {
-    border-color: $color;
-    color: $color; // Needed for Firefox HCM
-  }
-}
-
-@mixin _outline-error-color($colors) {
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _outline-color($colors);
-  }
-}
-
-@mixin _outline-opacity($opacities) {
-  @include _set-outline-inactive-opacity(map.get($opacities, default));
-
-  &.md3-field--disabled {
-    @include _set-outline-inactive-opacity(map.get($opacities, disabled));
-  }
-}
-
-@mixin _set-outline-inactive-opacity($opacity) {
-  .md3-field__outline-start,
-  .md3-field__outline-end,
-  .md3-field__outline-panel-inactive {
-    opacity: $opacity;
-  }
-}
-
-@mixin _outline-width($widths) {
-  @include _set-outline-width(map.get($widths, default));
-
-  &:hover {
-    @include _set-outline-width(map.get($widths, hover));
-  }
-
-  @include _set-outline-focus-width(map.get($widths, focus));
-
-  &.md3-field--disabled {
-    @include _set-outline-width(map.get($widths, disabled));
-  }
-}
-
-@mixin _set-outline-width($width) {
-  .md3-field__outline-start::before,
-  .md3-field__outline-end::before,
-  .md3-field__outline-panel-inactive,
-  .md3-field__outline-panel-inactive::before,
-  .md3-field__outline-panel-inactive::after {
-    border-width: $width;
-  }
-}
-
-@mixin _set-outline-focus-width($width) {
-  .md3-field__outline-start::after,
-  .md3-field__outline-end::after,
-  .md3-field__outline-panel-active,
-  .md3-field__outline-panel-active::before,
-  .md3-field__outline-panel-active::after {
-    border-width: $width;
-  }
-}

package/field/lib/_supporting-text-theme.scss

@@ -1,107 +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 '@material/web/sass/typography';
-
-@function resolve-theme($theme, $resolvers) {
-  @return typography.resolve-theme(
-    $theme,
-    map.get($resolvers, typography),
-    supporting-text
-  );
-}
-
-@mixin theme-styles($theme) {
-  @include _color(
-    (
-      default: map.get($theme, supporting-text-color),
-      focus: map.get($theme, focus-supporting-text-color),
-      hover: map.get($theme, hover-supporting-text-color),
-      disabled: map.get($theme, disabled-supporting-text-color),
-    )
-  );
-
-  &:not(.md3-field--disabled).md3-field--error {
-    @include _color(
-      (
-        default: map.get($theme, error-supporting-text-color),
-        focus: map.get($theme, error-focus-supporting-text-color),
-        hover: map.get($theme, error-hover-supporting-text-color),
-      )
-    );
-  }
-
-  .md3-field__supporting-text {
-    @include typography.theme-styles(
-      (
-        font: map.get($theme, supporting-text-font),
-        tracking: map.get($theme, supporting-text-tracking),
-        weight: map.get($theme, supporting-text-weight),
-        size: map.get($theme, supporting-text-size),
-        line-height: map.get($theme, supporting-text-line-height),
-      )
-    );
-  }
-
-  &.md3-field--disabled {
-    .md3-field__supporting-text {
-      opacity: map.get($theme, disabled-supporting-text-opacity);
-    }
-  }
-
-  @include _padding(
-    map.get($theme, supporting-text-padding),
-    map.get($theme, supporting-text-padding-top)
-  );
-}
-
-@mixin _color($colors) {
-  .md3-field__supporting-text {
-    color: map.get($colors, default);
-  }
-
-  &:hover {
-    .md3-field__supporting-text {
-      color: map.get($colors, hover);
-    }
-  }
-
-  &.md3-field--focus {
-    .md3-field__supporting-text {
-      color: map.get($colors, focus);
-    }
-  }
-
-  &.md3-field--disabled {
-    .md3-field__supporting-text {
-      color: map.get($colors, disabled);
-    }
-  }
-}
-
-@mixin _padding($padding-horizontal, $padding-top) {
-  .md3-field__supporting-text {
-    padding: 0 $padding-horizontal;
-  }
-
-  // Add padding to slotted elements instead of the wrappers so that it does not
-  // show when the supporting text is empty.
-  .md3-field__supporting-text-start,
-  .md3-field__supporting-text-end {
-    ::slotted(:not(:empty)) {
-      padding-top: $padding-top;
-    }
-  }
-
-  .md3-field__supporting-text-end {
-    ::slotted(:not(:empty)) {
-      padding-inline-start: $padding-horizontal;
-    }
-  }
-}

package/focus/lib/_focus-ring-theme.scss

@@ -1,89 +0,0 @@
-//
-// Copyright 2021 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';
-
-$_custom-property-prefix: 'focus-ring';
-$_color-sys: tokens.md-sys-color-values-light-dynamic();
-
-$light-theme: (
-  ring-radius: 8px,
-  container-outer-padding-vertical: 2px,
-  container-outer-padding-horizontal: 2px,
-  inner-ring-width: 2px,
-  inner-ring-color: map.get($_color-sys, on-tertiary-container),
-  outer-ring-width: 2px,
-  outer-ring-color: map.get($_color-sys, tertiary-container),
-);
-
-@mixin theme($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  @include theme.emit-theme-vars($theme);
-}
-
-@mixin theme-styles($theme, $resolvers: resolvers.$material) {
-  $theme: theme.validate-theme-styles($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
-
-  $container-outer-padding-vertical: map.get(
-    $theme,
-    container-outer-padding-vertical
-  );
-  $container-outer-padding-horizontal: map.get(
-    $theme,
-    container-outer-padding-horizontal
-  );
-  $inner-width: map.get($theme, inner-ring-width);
-  $inner-color: map.get($theme, inner-ring-color);
-
-  $outer-width: map.get($theme, outer-ring-width);
-  $outer-color: map.get($theme, outer-ring-color);
-
-  $outer-radius: map.get($theme, ring-radius);
-  $inner-radius: calc(#{$outer-radius} - #{$outer-width});
-
-  // Outer
-  @include _outer-ring-size(
-    $container-outer-padding-vertical,
-    $container-outer-padding-horizontal,
-    $inner-width,
-    $outer-width
-  );
-  @include _set-border($outer-width, $outer-color, $outer-radius);
-
-  // Inner
-  &::before {
-    @include _set-border($inner-width, $inner-color, $inner-radius);
-  }
-}
-
-@mixin _outer-ring-size(
-  $container-outer-padding-vertical,
-  $container-outer-padding-horizontal,
-  $inner-width,
-  $outer-width
-) {
-  // Note that the ring will not respect its parent's border. This will not be
-  // an issue as long as border is set via a sibling node, similar to ripple
-  // and touch target.
-  $vertical-inset: calc(
-    -1 * (#{$container-outer-padding-vertical} + #{$inner-width} + #{$outer-width})
-  );
-  $horizontal-inset: calc(
-    -1 * (#{$container-outer-padding-horizontal} + #{$inner-width} + #{$outer-width})
-  );
-
-  inset: $vertical-inset $horizontal-inset;
-}
-
-@mixin _set-border($width, $color, $radius) {
-  border: $width solid $color;
-  border-radius: $radius;
-}

package/formfield/formfield.js

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { Formfield } from './lib/formfield.js';
-import { styles as formfieldStyles } from './lib/formfield-styles.css.js';
-/**
- * @soyCompatible
- * @final
- * @suppress {visibility}
- */
-let MdFormfield = class MdFormfield extends Formfield {
-};
-MdFormfield.styles = [formfieldStyles];
-MdFormfield = __decorate([
-    customElement('md-formfield')
-], MdFormfield);
-export { MdFormfield };
-//# sourceMappingURL=formfield.js.map

package/formfield/formfield.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formfield.js","sourceRoot":"","sources":["formfield.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,MAAM,IAAI,eAAe,EAAC,MAAM,+BAA+B,CAAC;AAQxE;;;;GAIG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,SAAS;CAEzC,CAAA;AADiB,kBAAM,GAAG,CAAC,eAAe,CAAE,CAAA;AADhC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB;SAFY,WAAW","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 {Formfield} from './lib/formfield.js';\nimport {styles as formfieldStyles} from './lib/formfield-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-formfield': MdFormfield;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-formfield')\nexport class MdFormfield extends Formfield {\n  static override styles = [formfieldStyles];\n}\n"]}

package/formfield/lib/_formfield-theme.scss

@@ -1,41 +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 '@material/web/sass/theme';
-@use '@material/web/tokens';
-
-$custom-property-prefix: 'formfield';
-
-$light-theme: (
-  label-text-color:
-    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
-  disabled-label-text-color:
-    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface-variant),
-);
-
-@mixin theme($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  @include theme.emit-theme-vars(
-    theme.create-theme-vars($theme, $custom-property-prefix)
-  );
-}
-
-@mixin theme-styles($theme) {
-  $theme: theme.validate-theme($light-theme, $theme);
-  $theme: theme.create-theme-vars($theme, $prefix: $custom-property-prefix);
-
-  .md3-formfield__label {
-    color: map.get($theme, label-text-color);
-  }
-
-  &.md3-formfield--disabled .md3-formfield__label {
-    color: map.get($theme, disabled-label-text-color);
-  }
-}

package/formfield/lib/_formfield.scss

@@ -1,40 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@mixin static-styles() {
-  :host {
-    display: inline-flex;
-  }
-
-  .md3-formfield {
-    align-items: center;
-    display: inline-flex;
-    vertical-align: middle;
-    width: 100%;
-  }
-
-  .md3-formfield__label {
-    margin-inline: 0 auto;
-    order: 0;
-    padding-inline: 4px 0;
-  }
-
-  .md3-formfield--align-end .md3-formfield__label {
-    margin-inline: auto 0;
-    order: -1;
-    padding-inline: 0 4px;
-  }
-
-  .md3-formfield--space-between {
-    justify-content: space-between;
-  }
-
-  .md3-formfield--space-between .md3-formfield__label {
-    margin: 0;
-  }
-}

package/formfield/lib/formfield-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{display:inline-flex}.md3-formfield{align-items:center;display:inline-flex;vertical-align:middle;width:100%}.md3-formfield__label{margin-inline:0 auto;order:0;padding-inline:4px 0}.md3-formfield--align-end .md3-formfield__label{margin-inline:auto 0;order:-1;padding-inline:0 4px}.md3-formfield--space-between{justify-content:space-between}.md3-formfield--space-between .md3-formfield__label{margin:0}.md3-formfield .md3-formfield__label{color:var(--md-formfield-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-formfield.md3-formfield--disabled .md3-formfield__label{color:var(--md-formfield-disabled-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=formfield-styles.css.map */
-`;
-//# sourceMappingURL=formfield-styles.css.js.map

package/formfield/lib/formfield-styles.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formfield-styles.css.js","sourceRoot":"","sources":["formfield-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{display:inline-flex}.md3-formfield{align-items:center;display:inline-flex;vertical-align:middle;width:100%}.md3-formfield__label{margin-inline:0 auto;order:0;padding-inline:4px 0}.md3-formfield--align-end .md3-formfield__label{margin-inline:auto 0;order:-1;padding-inline:0 4px}.md3-formfield--space-between{justify-content:space-between}.md3-formfield--space-between .md3-formfield__label{margin:0}.md3-formfield .md3-formfield__label{color:var(--md-formfield-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-formfield.md3-formfield--disabled .md3-formfield__label{color:var(--md-formfield-disabled-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=formfield-styles.css.map */\n`;\n "]}

package/formfield/lib/formfield-styles.scss

@@ -1,16 +0,0 @@
-//
-// Copyright 2021 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './formfield';
-@use './formfield-theme';
-
-@include formfield.static-styles();
-
-.md3-formfield {
-  @include formfield-theme.theme-styles(formfield-theme.$light-theme);
-}

package/formfield/lib/formfield.d.ts

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
-export declare class Formfield extends LitElement {
-    alignEnd: boolean;
-    spaceBetween: boolean;
-    label: string;
-    inputId?: string;
-    disabled: boolean;
-    protected slottedInputs: HTMLElement[] | null;
-    protected get input(): HTMLElement;
-    /** @soyTemplate */
-    protected render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
-    protected labelClick(): void;
-}