@api-client/ui 0.2.13 → 0.3.0

package/demo/md/buttons/index.ts

@@ -1,279 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { reactive } from '../../../src/decorators/index.js'
-import type ButtonElement from '../../../src/md/button/internals/button.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-
-import '../../../src/md/button/ui-elevated-button.js'
-import '../../../src/md/button/ui-filled-button.js'
-import '../../../src/md/button/ui-filled-tonal-button.js'
-import '../../../src/md/button/ui-outlined-button.js'
-import '../../../src/md/button/ui-text-button.js'
-import '../../../src/md/icons/ui-icon.js'
-import '../../../src/md/dialog/ui-dialog.js'
-
-import '@material/web/button/text-button.js'
-import '@material/web/button/filled-button.js'
-import '@material/web/button/elevated-button.js'
-import '@material/web/button/filled-tonal-button.js'
-import '@material/web/button/outlined-button.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI button'
-
-  @reactive() accessor formValues: string | undefined
-
-  @reactive() accessor dialogOpened = false
-
-  _clickHandler(e: Event): void {
-    const button = e.target as ButtonElement
-    console.log(`A ${button.type} button was clicked.`)
-  }
-
-  _submitHandler(e: SubmitEvent): void {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const values = Array.from(new FormData(form)) as string[][]
-
-    const serialized = new URLSearchParams(values).toString()
-    this.formValues = serialized
-  }
-
-  openDialog(): void {
-    this.dialogOpened = true
-  }
-
-  dialogClosed(): void {
-    this.dialogOpened = false
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Elevated button</h2>
-        <div class="demo-row">
-          <ui-elevated-button @click="${this._clickHandler}">elevated button</ui-elevated-button>
-          <ui-elevated-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            elevated button
-          </ui-elevated-button>
-          <ui-elevated-button @click="${this._clickHandler}" trailingIcon>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            <div>elevated button</div>
-          </ui-elevated-button>
-          <ui-elevated-button disabled @click="${this._clickHandler}">elevated button</ui-elevated-button>
-          <ui-elevated-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            elevated button
-          </ui-elevated-button>
-        </div>
-        <div class="demo-row">
-          <md-elevated-button>elevated button</md-elevated-button>
-          <md-elevated-button><ui-icon slot="icon" icon="add"></ui-icon>elevated button</md-elevated-button>
-          <md-elevated-button trailingIcon
-            ><ui-icon slot="icon" icon="add"></ui-icon>elevated button</md-elevated-button
-          >
-          <md-elevated-button disabled>elevated button</md-elevated-button>
-          <md-elevated-button disabled><ui-icon slot="icon" icon="add"></ui-icon>elevated button</md-elevated-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Filled button</h2>
-        <div class="demo-row">
-          <ui-filled-button @click="${this._clickHandler}">filled button</ui-filled-button>
-          <ui-filled-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </ui-filled-button>
-          <ui-filled-button @click="${this._clickHandler}" trailingIcon>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </ui-filled-button>
-          <ui-filled-button disabled @click="${this._clickHandler}">filled button</ui-filled-button>
-          <ui-filled-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </ui-filled-button>
-        </div>
-        <div class="demo-row">
-          <md-filled-button @click="${this._clickHandler}">filled button</md-filled-button>
-          <md-filled-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </md-filled-button>
-          <md-filled-button @click="${this._clickHandler}" trailingIcon>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </md-filled-button>
-          <md-filled-button disabled @click="${this._clickHandler}">filled button</md-filled-button>
-          <md-filled-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled button
-          </md-filled-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Filled tonal button</h2>
-        <div class="demo-row">
-          <ui-filled-tonal-button @click="${this._clickHandler}">filled tonal button</ui-filled-tonal-button>
-          <ui-filled-tonal-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            <div>filled tonal button</div>
-          </ui-filled-tonal-button>
-          <ui-filled-tonal-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled tonal button
-          </ui-filled-tonal-button>
-          <ui-filled-tonal-button disabled @click="${this._clickHandler}">filled tonal button</ui-filled-tonal-button>
-          <ui-filled-tonal-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled tonal button
-          </ui-filled-tonal-button>
-        </div>
-        <div class="demo-row">
-          <md-filled-tonal-button @click="${this._clickHandler}">filled tonal button</md-filled-tonal-button>
-          <md-filled-tonal-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            <div>filled tonal button</div>
-          </md-filled-tonal-button>
-          <md-filled-tonal-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled tonal button
-          </md-filled-tonal-button>
-          <md-filled-tonal-button disabled @click="${this._clickHandler}">filled tonal button</md-filled-tonal-button>
-          <md-filled-tonal-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            filled tonal button
-          </md-filled-tonal-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Outlined button</h2>
-        <div class="demo-row">
-          <ui-outlined-button @click="${this._clickHandler}">outlined button</ui-outlined-button>
-          <ui-outlined-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            <div>outlined button</div>
-          </ui-outlined-button>
-          <ui-outlined-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            outlined button
-          </ui-outlined-button>
-          <ui-outlined-button disabled @click="${this._clickHandler}">outlined button</ui-outlined-button>
-          <ui-outlined-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            outlined button
-          </ui-outlined-button>
-        </div>
-        <div class="demo-row">
-          <md-outlined-button @click="${this._clickHandler}">outlined button</md-outlined-button>
-          <md-outlined-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            <div>outlined button</div>
-          </md-outlined-button>
-          <md-outlined-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            outlined button
-          </md-outlined-button>
-          <md-outlined-button disabled @click="${this._clickHandler}">outlined button</md-outlined-button>
-          <md-outlined-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            outlined button
-          </md-outlined-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Text button</h2>
-        <div class="demo-row">
-          <ui-text-button @click="${this._clickHandler}">text button</ui-text-button>
-          <ui-text-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </ui-text-button>
-          <ui-text-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </ui-text-button>
-          <ui-text-button disabled @click="${this._clickHandler}">text button</ui-text-button>
-          <ui-text-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </ui-text-button>
-        </div>
-        <div class="demo-row">
-          <md-text-button @click="${this._clickHandler}">text button</md-text-button>
-          <md-text-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </md-text-button>
-          <md-text-button @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </md-text-button>
-          <md-text-button disabled @click="${this._clickHandler}">text button</md-text-button>
-          <md-text-button disabled @click="${this._clickHandler}">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            text button
-          </md-text-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">A submit button within a form</h2>
-        <form method="get" action="#" @submit="${this._submitHandler}">
-          <label for="formInput">An input</label>
-          <input type="text" id="formInput" required name="input" />
-          <label for="checkboxInput">A checkbox</label>
-          <input type="checkbox" id="checkboxInput" name="flag" />
-          <ui-filled-button name="submit" value="on" type="submit">Submit</ui-filled-button>
-        </form>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">A submit button outside a form</h2>
-        <form method="get" action="#" @submit="${this._submitHandler}" id="myForm">
-          <label for="formInput">An input</label>
-          <input type="text" id="formInput" required name="input" />
-          <label for="checkboxInput">A checkbox</label>
-          <input type="checkbox" id="checkboxInput" name="flag" />
-        </form>
-        <div>
-          <ui-filled-button name="submit" value="on" type="submit" form="myForm">Submit</ui-filled-button>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Buttons in a dialog</h2>
-        <ui-filled-button @click="${this.openDialog}">Open dialog</ui-filled-button>
-        <ui-dialog ?open="${this.dialogOpened}" @close="${this.dialogClosed}" modal>
-          <span slot="title">Dialog with a form</span>
-          <form method="get" action="#" @submit="${this._submitHandler}" id="dialogForm">
-            <label for="formInput">An input</label>
-            <input type="text" id="formInput" required name="input" />
-            <label for="checkboxInput">A checkbox</label>
-            <input type="checkbox" id="checkboxInput" name="flag" />
-          </form>
-          <ui-text-button slot="button" value="dismiss">Dismiss</ui-text-button>
-          <ui-text-button slot="button" name="submit" value="confirm" type="submit" form="dialogForm"
-            >Submit</ui-text-button
-          >
-        </ui-dialog>
-      </section>
-
-      ${this.formValues
-        ? html`
-            <output>
-              <code><pre>${this.formValues}</pre></code>
-            </output>
-          `
-        : html``}
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/src/md/button/internals/button-styles.ts

@@ -1,143 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    display: inline-block;
-    vertical-align: middle;
-    box-sizing: content-box;
-    outline: none;
-    writing-mode: horizontal-tb !important;
-    text-rendering: auto;
-    cursor: default;
-    user-select: none;
-    height: 40px;
-    width: fit-content;
-    -webkit-tap-highlight-color: transparent;
-
-    position: relative;
-
-    border-radius: 20px;
-
-    --_label-text-font: var(
-      --ui-button-label-text-font,
-      var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto))
-    );
-    --_label-text-weight: var(
-      --ui-button-label-text-weight,
-      var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
-    );
-    --_label-text-line-height: var(
-      --ui-button-label-text-line-height,
-      var(--md-sys-typescale-label-large-height, 1.25rem)
-    );
-    --_label-text-size: var(--ui-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));
-    --_icon-size: var(--md-elevated-button-icon-size, 18px);
-    --_content-padding: 0px 24px;
-    --_content-opacity: 1;
-    --_content-background-color: initial;
-    --_content-color: inherit;
-    --_container-background-color: initial;
-    --_container-opacity: 1;
-    --_container-elevation: var(--md-sys-elevation-0);
-    --_surface-color: inherit;
-    --_state-opacity: 0;
-    --_state-background-color: initial;
-
-    letter-spacing: var(--md-sys-typescale-label-large-tracking);
-    font-family: var(--_label-text-font);
-    font-size: var(--_label-text-size);
-    line-height: var(--_label-text-line-height);
-    font-weight: var(--_label-text-weight);
-    text-overflow: ellipsis;
-  }
-
-  :host([disabled]) {
-    --_content-opacity: 0.38;
-  }
-
-  .surface {
-    width: inherit;
-    height: inherit;
-    position: relative;
-    border-radius: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--_surface-color);
-  }
-
-  .container,
-  .state {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-  }
-
-  .container {
-    z-index: 1;
-    transition:
-      box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 230ms cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: var(--_container-background-color);
-    opacity: var(--_container-opacity);
-    box-shadow: var(--_container-elevation);
-  }
-
-  .state {
-    z-index: 2;
-    opacity: var(--_state-opacity);
-    background-color: var(--_state-background-color);
-    transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .content {
-    z-index: 3;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    padding: var(--_content-padding);
-    opacity: var(--_content-opacity);
-    white-space: nowrap;
-    color: var(--_content-color);
-    background-color: var(--_content-background-color);
-  }
-
-  .content slot::slotted(*) {
-    color: var(--_content-color);
-    fill: var(--_content-color);
-  }
-
-  .ripple {
-    border-radius: inherit;
-    z-index: 3;
-  }
-
-  .surface.withIcon {
-    --_content-padding: 0px 24px 0px 16px;
-  }
-
-  :host([trailingIcon]) .surface.withIcon {
-    --_content-padding: 0px 16px 0px 24px;
-  }
-
-  .surface.withIcon slot[name='icon']::slotted(*) {
-    margin-right: 8px;
-    margin-left: 0px;
-    font-size: var(--_icon-size);
-    inline-size: var(--_icon-size);
-    block-size: var(--_icon-size);
-  }
-
-  :host([trailingIcon]) .surface.withIcon slot[name='icon']::slotted(*) {
-    margin-left: 8px;
-    margin-right: 0px;
-  }
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-`

package/src/md/button/internals/elevated-button.styles.ts

@@ -1,38 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-    --_container-background-color: var(--md-sys-color-surface);
-    --_container-elevation: var(--md-sys-elevation-1);
-    --_surface-color: var(--md-sys-color-primary);
-    --_content-color: var(--md-sys-color-primary);
-  }
-
-  :host(:hover) {
-    --_container-elevation: var(--md-sys-elevation-2);
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host(:focus) {
-    --_container-elevation: var(--md-sys-elevation-1);
-  }
-
-  :host(:active),
-  :host .pressed {
-    --_container-elevation: var(--md-sys-elevation-1);
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([disabled]) {
-    --_container-background-color: var(--md-sys-color-on-surface);
-    --_container-opacity: 0.12;
-    --_container-elevation: var(--md-sys-elevation-0);
-    --_content-opacity: 0.38;
-    --_content-color: var(--md-sys-color-on-surface);
-  }
-`

package/src/md/button/internals/elevated-button.ts

@@ -1,3 +0,0 @@
-import Button from './button.js'
-
-export default class ElevatedButton extends Button {}

package/src/md/button/internals/filled-button.styles.ts

@@ -1,30 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
-    --_container-background-color: var(--md-sys-color-primary);
-    --_surface-color: var(--md-sys-color-on-primary);
-    --_content-color: var(--md-sys-color-on-primary);
-  }
-
-  :host([disabled]) {
-    --_container-background-color: var(--md-sys-color-on-surface);
-    --_container-opacity: 0.12;
-    --_content-color: var(--md-sys-color-on-surface);
-  }
-
-  :host(:hover) {
-    --_container-elevation: var(--md-sys-elevation-1);
-    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
-    --_state-background-color: var(--md-sys-color-on-primary);
-  }
-
-  :host(:active),
-  :host .pressed {
-    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-    --_state-background-color: var(--md-sys-color-on-primary);
-  }
-`

package/src/md/button/internals/filled-button.ts

@@ -1,3 +0,0 @@
-import Button from './button.js'
-
-export default class FilledButton extends Button {}

package/src/md/button/internals/filled-tonal-button.styles.ts

@@ -1,30 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
-    --_container-background-color: var(--md-sys-color-secondary-container);
-    --_surface-color: var(--md-sys-color-on-secondary-container);
-    --_content-color: var(--md-sys-color-on-secondary-container);
-  }
-
-  :host(:hover) {
-    --_container-elevation: var(--md-sys-elevation-1);
-    --_state-background-color: var(--md-sys-color-on-secondary-container);
-    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host(:active),
-  :host .pressed {
-    --_state-background-color: var(--md-sys-color-on-secondary-container);
-    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([disabled]) {
-    --_container-background-color: var(--md-sys-color-on-surface);
-    --_container-opacity: 0.12;
-    --_content-color: var(--md-sys-color-on-surface) !important;
-  }
-`

package/src/md/button/internals/filled-tonal-button.ts

@@ -1,3 +0,0 @@
-import Button from './button.js'
-
-export default class FilledTonalButton extends Button {}

package/src/md/button/internals/outlined-button.styles.ts

@@ -1,31 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-    --_surface-color: var(--md-sys-color-primary);
-    --_content-color: var(--md-sys-color-primary);
-  }
-
-  .container {
-    border: 1px var(--md-sys-color-outline) solid;
-  }
-
-  :host(:hover) {
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host(:active),
-  :host .pressed {
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-
-  :host([disabled]) {
-    --_container-opacity: 0.12;
-    --_content-color: var(--md-sys-color-on-surface);
-  }
-`

package/src/md/button/internals/outlined-button.ts

@@ -1,3 +0,0 @@
-import Button from './button.js'
-
-export default class OutlinedButton extends Button {}

package/src/md/button/internals/text-button.styles.ts

@@ -1,30 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-    --_content-color: var(--md-sys-color-primary);
-    --_content-padding: 0 12px;
-  }
-
-  .surface.withIcon {
-    --_content-padding: 0 16px 0 12px;
-  }
-
-  :host([disabled]) {
-    --_content-color: var(--md-sys-color-on-surface);
-  }
-
-  :host(:hover) {
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
-  }
-
-  :host(:active),
-  :host .pressed {
-    --_state-background-color: var(--md-sys-color-primary);
-    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
-  }
-`

package/src/md/button/internals/text-button.ts

@@ -1,3 +0,0 @@
-import Button from './button.js'
-
-export default class TextButton extends Button {}

package/src/md/button/ui-elevated-button.ts

@@ -1,19 +0,0 @@
-import type { CSSResultOrNative } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import Element from './internals/elevated-button.js'
-import base from './internals/button-styles.js'
-import styles from './internals/elevated-button.styles.js'
-
-/**
- * @attribute form
- */
-@customElement('ui-elevated-button')
-export class UiElevatedButtonElement extends Element {
-  static override styles: CSSResultOrNative[] = [base, styles]
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ui-elevated-button': UiElevatedButtonElement
-  }
-}

package/src/md/button/ui-filled-button.ts

@@ -1,19 +0,0 @@
-import type { CSSResultOrNative } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import Element from './internals/filled-button.js'
-import base from './internals/button-styles.js'
-import styles from './internals/filled-button.styles.js'
-
-/**
- * @attribute {string} form
- */
-@customElement('ui-filled-button')
-export class UiFilledButtonElement extends Element {
-  static override styles: CSSResultOrNative[] = [base, styles]
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ui-filled-button': UiFilledButtonElement
-  }
-}

package/src/md/button/ui-filled-tonal-button.ts

@@ -1,19 +0,0 @@
-import type { CSSResultOrNative } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import Element from './internals/filled-tonal-button.js'
-import base from './internals/button-styles.js'
-import styles from './internals/filled-tonal-button.styles.js'
-
-/**
- * @attribute {string} form
- */
-@customElement('ui-filled-tonal-button')
-export class UiFilledButtonElement extends Element {
-  static override styles: CSSResultOrNative[] = [base, styles]
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ui-filled-tonal-button': UiFilledButtonElement
-  }
-}