@universal-material/web 3.0.8 → 3.0.9

package/src/theme/rgb-color.ts

@@ -0,0 +1,19 @@
+import { blueFromArgb, greenFromArgb, redFromArgb } from '@material/material-color-utilities';
+
+export class RgbColor {
+  r: number;
+  g: number;
+  b: number;
+
+  constructor(r: number, g: number, b: number) {
+    this.r = r;
+    this.g = g;
+    this.b = b;
+  }
+
+  static fromArgb(argb: number): RgbColor {
+    return new RgbColor(redFromArgb(argb), greenFromArgb(argb), blueFromArgb(argb));
+  }
+
+  toString = (): string => `${this.r},${this.g},${this.b}`;
+}

package/src/theme/theme-builder.ts

@@ -0,0 +1,201 @@
+import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';
+
+import { Color } from './color.js';
+import { CssVarBuilder } from './css-var-builder.js';
+import { neutralColors, neutralVariantColors } from './neutral-colors.js';
+import { ThemeColor } from './theme-color.js';
+
+function getCss(selector: string, content: string): string {
+  return `${selector} {
+${content}}`;
+}
+
+export class ThemeBuilder {
+  cssClass: string | null;
+  colors: ThemeColor[] = [];
+  commonColors: ThemeColor[] = [];
+  neutralColorPalette!: TonalPalette;
+  neutralVariantColorPalette!: TonalPalette;
+
+  private partial = false;
+
+  private constructor() {
+    this.cssClass = null;
+  }
+
+  static create(primaryColorHex: string): ThemeBuilder {
+    return new ThemeBuilder()
+      .addColorFromHex('primary', primaryColorHex);
+  }
+
+  static createPartial(): ThemeBuilder {
+    const themeBuilder = new ThemeBuilder();
+    themeBuilder.partial = true;
+
+    return themeBuilder;
+  }
+
+  addColorFromHex(name: string, hex: string): ThemeBuilder {
+    const palette = TonalPalette.fromInt(argbFromHex(hex));
+
+    this.addColorFromPalette(name, palette);
+    return this;
+  }
+
+  addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {
+    this.colors.push({name, lightTone: 40, darkTone: 80, tonalPalette: palette});
+    this.colors.push({name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette});
+    this.colors.push({name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette});
+    this.colors.push({name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette});
+
+    this.colors.push({name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette});
+    this.colors.push({name: `${name}-fixed-dim`, fixedTone: 800, tonalPalette: palette});
+    this.colors.push({name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette});
+    this.colors.push({name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette});
+    return this;
+  }
+
+  addCommonColor(name: string, hex: string): ThemeBuilder {
+    this.commonColors.push({name, tonalPalette: TonalPalette.fromInt(argbFromHex(hex))})
+    return this;
+  }
+
+  setCssClass(cssClass: string): ThemeBuilder {
+    this.cssClass = cssClass;
+    return this;
+  }
+
+  private ensureCssClassStartsWithDot(): void {
+    if (!this.cssClass || this.cssClass.startsWith('.')) {
+      return;
+    }
+
+    this.cssClass = `.${this.cssClass}`;
+  }
+
+  private ensureThemeColors(): void {
+
+    const primaryColor = this.colors.find(c => c.name === 'primary')!;
+
+    const palette = CorePalette.of(primaryColor.tonalPalette.tone(40));
+
+    if (!this.colors.find(c => c.name === 'secondary')) {
+      this.addColorFromPalette('secondary', palette.a2);
+    }
+
+    if (!this.colors.find(c => c.name === 'tertiary')) {
+      this.addColorFromPalette('tertiary', palette.a3);
+    }
+
+    if (!this.neutralColorPalette) {
+      this.neutralColorPalette = palette.n1;
+    }
+
+    if (!this.neutralVariantColorPalette) {
+      this.neutralVariantColorPalette = palette.n2;
+    }
+  }
+
+  private getNeutralVariables(dark: boolean): string {
+    const builder = CssVarBuilder.create();
+
+    this.addColors(builder, neutralColors, this.neutralColorPalette, dark);
+
+    builder
+      .add('--u-color-background', "var(--u-color-surface-container-highest)")
+      .add('--u-color-inverse-background', "var(--u-color-inverse-surface-container-highest)")
+      .add('--u-color-on-background', "var(--u-color-on-surface)")
+      .add('--u-color-on-inverse-background', "var(--u-color-inverse-on-surface)");
+
+    return builder.build();
+  }
+
+  private getNeutralVariantVariables(dark: boolean): string {
+    const builder = CssVarBuilder.create();
+
+    this.addColors(builder, neutralVariantColors, this.neutralColorPalette, dark);
+
+    return builder.build()
+  }
+
+  getColorVariables(color: ThemeColor, dark: boolean): string {
+
+    const builder = CssVarBuilder.create();
+
+    this.addToneColor(builder, color, color.tonalPalette, dark)
+
+    return builder.build();
+  }
+
+  private getColorsVariables(dark: boolean): string {
+    let variables = '';
+
+    for (const color of this.colors) {
+      variables += this.getColorVariables(color, dark);
+    }
+
+    if (this.neutralColorPalette) {
+      variables += this.getNeutralVariables(dark);
+    }
+
+    if (this.neutralVariantColorPalette) {
+      variables += this.getNeutralVariantVariables(dark);
+    }
+
+    return variables;
+  }
+
+  private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette, dark: boolean): void {
+    for (const color of colors) {
+      this.addToneColor(builder, color, palette, dark);
+    }
+  }
+
+  private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette, dark: boolean): void {
+    if (color.fixedTone !== undefined) {
+      builder.addFromArgb(color.name, palette.tone(color.fixedTone));
+      return;
+    }
+
+    const tone = dark
+      ? color.darkTone!
+      : color.lightTone!;
+
+    const inverseTone = dark
+      ? color.lightTone!
+      : color.darkTone!;
+
+    builder
+      .addFromArgb(color.name, palette.tone(tone))
+      .addFromArgb(`inverse-${color.name}`, palette.tone(inverseTone));
+
+    if (dark) {
+      return;
+    }
+
+    builder
+      .addFromArgb(`light-${color.name}`, palette.tone(color.lightTone!))
+      .addFromArgb(`dark-${color.name}`, palette.tone(color.darkTone!));
+  }
+
+  build(): string {
+
+    this.ensureCssClassStartsWithDot();
+
+    const lightCssClass = this.cssClass ?? ':root';
+    const darkCssClass = this.cssClass
+      ? `${this.cssClass}.u-dark-mode,
+${this.cssClass} .u-dark-mode`
+      : '.u-dark-mode';
+
+    if (!this.partial) {
+      this.ensureThemeColors();
+    }
+
+    const variables = `${getCss(lightCssClass, `${this.getColorsVariables(false)}`)}
+
+${getCss(darkCssClass, this.getColorsVariables(true))}
+`;
+    return variables;
+  }
+}

package/{theme/theme-color.d.ts → src/theme/theme-color.ts}

@@ -1,6 +1,7 @@
 import { TonalPalette } from '@material/material-color-utilities';
+
 import { Color } from './color.js';
+
 export interface ThemeColor extends Color {
-    tonalPalette: TonalPalette;
+  tonalPalette: TonalPalette;
 }
-//# sourceMappingURL=theme-color.d.ts.map

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "es2020",
+    "lib": ["es2021", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ],
+    "types": ["mocha"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": [
+    "./node_modules/lit/decorators.d.ts"
+  ]
+}

package/web-dev-server.config.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {legacyPlugin} from '@web/dev-server-legacy';
+
+const mode = process.env.MODE || 'dev';
+if (!['dev', 'prod'].includes(mode)) {
+  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
+}
+
+export default {
+  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
+  preserveSymlinks: true,
+  plugins: [
+    legacyPlugin({
+      polyfills: {
+        // Manually imported in index.html file
+        webcomponents: false,
+      },
+    }),
+  ],
+};

package/web-test-runner.config.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {legacyPlugin} from '@web/dev-server-legacy';
+import {playwrightLauncher} from '@web/test-runner-playwright';
+
+const mode = process.env.MODE || 'dev';
+if (!['dev', 'prod'].includes(mode)) {
+  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
+}
+
+// Uncomment for testing on Sauce Labs
+// Must run `npm i --save-dev @web/test-runner-saucelabs` and set
+// SAUCE_USERNAME and SAUCE_USERNAME environment variables
+// ===========
+// import {createSauceLabsLauncher} from '@web/test-runner-saucelabs';
+// const sauceLabsLauncher = createSauceLabsLauncher(
+//   {
+//     user: process.env.SAUCE_USERNAME,
+//     key: process.env.SAUCE_USERNAME,
+//   },
+//   {
+//     'sauce:options': {
+//       name: 'unit tests',
+//       build: `${process.env.GITHUB_REF ?? 'local'} build ${
+//         process.env.GITHUB_RUN_NUMBER ?? ''
+//       }`,
+//     },
+//   }
+// );
+
+// Uncomment for testing on BrowserStack
+// Must run `npm i --save-dev @web/test-runner-browserstack` and set
+// BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables
+// ===========
+// import {browserstackLauncher as createBrowserstackLauncher} from '@web/test-runner-browserstack';
+// const browserstackLauncher = (config) => createBrowserstackLauncher({
+//   capabilities: {
+//     'browserstack.user': process.env.BROWSER_STACK_USERNAME,
+//     'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
+//     project: 'my-element',
+//     name: 'unit tests',
+//     build: `${process.env.GITHUB_REF ?? 'local'} build ${
+//       process.env.GITHUB_RUN_NUMBER ?? ''
+//     }`,
+//     ...config,
+//   }
+// });
+
+const browsers = {
+  // Local browser testing via playwright
+  // ===========
+  chromium: playwrightLauncher({product: 'chromium'}),
+  firefox: playwrightLauncher({product: 'firefox'}),
+  webkit: playwrightLauncher({product: 'webkit'}),
+
+  // Uncomment example launchers for running on Sauce Labs
+  // ===========
+  // chromium: sauceLabsLauncher({browserName: 'chrome', browserVersion: 'latest', platformName: 'Windows 10'}),
+  // firefox: sauceLabsLauncher({browserName: 'firefox', browserVersion: 'latest', platformName: 'Windows 10'}),
+  // safari: sauceLabsLauncher({browserName: 'safari', browserVersion: 'latest', platformName: 'macOS 10.15'}),
+
+  // Uncomment example launchers for running on Sauce Labs
+  // ===========
+  // chromium: browserstackLauncher({browserName: 'Chrome', os: 'Windows', os_version: '10'}),
+  // firefox: browserstackLauncher({browserName: 'Firefox', os: 'Windows', os_version: '10'}),
+  // safari: browserstackLauncher({browserName: 'Safari', browser_version: '14.0', os: 'OS X', os_version: 'Big Sur'}),
+};
+
+// Prepend BROWSERS=x,y to `npm run test` to run a subset of browsers
+// e.g. `BROWSERS=chromium,firefox npm run test`
+const noBrowser = (b) => {
+  throw new Error(`No browser configured named '${b}'; using defaults`);
+};
+let commandLineBrowsers;
+try {
+  commandLineBrowsers = process.env.BROWSERS?.split(',').map(
+    (b) => browsers[b] ?? noBrowser(b)
+  );
+} catch (e) {
+  console.warn(e);
+}
+
+// https://modern-web.dev/docs/test-runner/cli-and-configuration/
+export default {
+  rootDir: '.',
+  files: ['./test/**/*_test.js'],
+  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
+  preserveSymlinks: true,
+  browsers: commandLineBrowsers ?? Object.values(browsers),
+  testFramework: {
+    // https://mochajs.org/api/mocha
+    config: {
+      ui: 'tdd',
+      timeout: '60000',
+    },
+  },
+  plugins: [
+    // Detect browsers without modules (e.g. IE11) and transform to SystemJS
+    // (https://modern-web.dev/docs/dev-server/plugins/legacy/).
+    legacyPlugin({
+      polyfills: {
+        webcomponents: true,
+        // Inject lit's polyfill-support module into test files, which is required
+        // for interfacing with the webcomponents polyfills
+        custom: [
+          {
+            name: 'lit-polyfill-support',
+            path: 'node_modules/lit/polyfill-support.js',
+            test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
+            module: false,
+          },
+        ],
+      },
+    }),
+  ],
+};

package/button/button-base.d.ts

@@ -1,43 +0,0 @@
-import { HTMLTemplateResult, LitElement, nothing } from 'lit';
-import '../elevation/elevation.js';
-import '../ripple/ripple.js';
-export declare abstract class UmButtonBase extends LitElement {
-    #private;
-    static readonly formAssociated = true;
-    /**
-     * Whether the button is disabled or not.
-     */
-    disabled: boolean;
-    /**
-     * The URL that the link button points to.
-     */
-    href: string;
-    /**
-     * Where to display the linked `href` URL for a link button. Common options
-     * include `_blank` to open in a new tab.
-     */
-    target: string;
-    type: string;
-    value: string;
-    name: string | undefined;
-    private readonly buttonElement;
-    private readonly ripple;
-    /**
-     * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
-     */
-    get form(): HTMLFormElement | null;
-    constructor();
-    protected render(): import("lit-html").TemplateResult<1>;
-    private renderButton;
-    private renderLink;
-    protected abstract renderContent(): HTMLTemplateResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    focus(): void;
-    blur(): void;
-    protected getAriaLabel(): string | null | typeof nothing;
-    private innerHandleClick;
-    protected handleClick(_: UIEvent): void;
-}
-//# sourceMappingURL=button-base.d.ts.map

package/button/button-base.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,YAAa,SAAQ,UAAU;;IAEnD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,SAAM;IAEtB;;;OAGG;IACS,MAAM,EAAE,MAAM,CAAM;IAEpB,IAAI,EAAE,MAAM,CAAY;IAET,KAAK,EAAE,MAAM,CAAM;IAClC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD;;;OAGG;IACH,IACI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,MAAM;IAMzB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAelB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,gBAAgB;IA8BxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}

package/button/button-base.js

@@ -1,152 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _UmButtonBase_elementInternals;
-import { html, LitElement, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import '../elevation/elevation.js';
-import '../ripple/ripple.js';
-export class UmButtonBase extends LitElement {
-    /**
-     * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)
-     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
-     */
-    get form() {
-        return __classPrivateFieldGet(this, _UmButtonBase_elementInternals, "f").form;
-    }
-    constructor() {
-        super();
-        /**
-         * Whether the button is disabled or not.
-         */
-        this.disabled = false;
-        /**
-         * The URL that the link button points to.
-         */
-        this.href = '';
-        /**
-         * Where to display the linked `href` URL for a link button. Common options
-         * include `_blank` to open in a new tab.
-         */
-        this.target = '';
-        this.type = 'submit';
-        this.value = '';
-        _UmButtonBase_elementInternals.set(this, void 0);
-        __classPrivateFieldSet(this, _UmButtonBase_elementInternals, this.attachInternals(), "f");
-    }
-    render() {
-        return this.href
-            ? this.renderLink()
-            : this.renderButton();
-    }
-    renderButton() {
-        return html `
-      <button
-        id="button"
-        class="button"
-        ?disabled=${this.disabled}
-        aria-label="${this.getAriaLabel()}"
-        type="button">
-        <u-ripple ?disabled=${this.disabled}></u-ripple>
-        <u-elevation></u-elevation>
-      </button>
-      ${this.renderContent()}`;
-    }
-    renderLink() {
-        return html `<a
-      id="link"
-      class="button"
-      href=${this.disabled ? nothing : this.href}
-      aria-disabled=${this.disabled || nothing}
-      aria-label="${this.getAriaLabel()}"
-      target=${this.target || nothing}>
-      <u-elevation></u-elevation>
-      <u-ripple ?disabled=${this.disabled}></u-ripple>
-    </a>
-    ${this.renderContent()}`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.innerHandleClick);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.innerHandleClick);
-    }
-    focus() {
-        this.buttonElement?.focus();
-    }
-    blur() {
-        this.buttonElement?.blur();
-    }
-    getAriaLabel() {
-        return this.ariaLabel || nothing;
-    }
-    innerHandleClick(event) {
-        if (this.disabled) {
-            return;
-        }
-        if (event.detail === 0) {
-            this.ripple.createRipple();
-        }
-        this.handleClick(event);
-        if (this.type === 'button' || !!this.href) {
-            return;
-        }
-        if (!this.form) {
-            return;
-        }
-        __classPrivateFieldGet(this, _UmButtonBase_elementInternals, "f").setFormValue(this.value);
-        if (this.type === 'submit') {
-            this.form.requestSubmit();
-            return;
-        }
-        this.form.reset();
-    }
-    handleClick(_) {
-    }
-}
-_UmButtonBase_elementInternals = new WeakMap();
-UmButtonBase.formAssociated = true;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], UmButtonBase.prototype, "disabled", void 0);
-__decorate([
-    property()
-], UmButtonBase.prototype, "href", void 0);
-__decorate([
-    property()
-], UmButtonBase.prototype, "target", void 0);
-__decorate([
-    property()
-], UmButtonBase.prototype, "type", void 0);
-__decorate([
-    property({ reflect: true })
-], UmButtonBase.prototype, "value", void 0);
-__decorate([
-    property()
-], UmButtonBase.prototype, "name", void 0);
-__decorate([
-    query('.button')
-], UmButtonBase.prototype, "buttonElement", void 0);
-__decorate([
-    query('u-ripple')
-], UmButtonBase.prototype, "ripple", void 0);
-__decorate([
-    property()
-], UmButtonBase.prototype, "form", null);
-//# sourceMappingURL=button-base.js.map

package/button/button-base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple';\n\nexport abstract class UmButtonBase extends LitElement {\n\n  static readonly formAssociated = true;\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string = '';\n\n  @property() type: string = 'submit';\n\n  @property({reflect: true}) value: string = '';\n  @property() name: string | undefined;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  /**\n   * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form\n   */\n  @property()\n  get form(): HTMLFormElement | null {\n    return this.#elementInternals.form;\n  }\n\n  readonly #elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.#elementInternals = this.attachInternals();\n  }\n\n  protected override render() {\n    return this.href\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n  private renderButton() {\n\n    return html`\n      <button\n        id=\"button\"\n        class=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=\"${this.getAriaLabel()}\"\n        type=\"button\">\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n      ${this.renderContent()}`;\n  }\n\n  private renderLink() {\n\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      href=${this.disabled ? nothing : this.href}\n      aria-disabled=${this.disabled || nothing}\n      aria-label=\"${this.getAriaLabel()}\"\n      target=${this.target || nothing}>\n      <u-elevation></u-elevation>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>\n    </a>\n    ${this.renderContent()}`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerHandleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('click', this.innerHandleClick);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    return this.ariaLabel || nothing;\n  }\n\n  private innerHandleClick(event: UIEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.detail === 0) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    if (!this.form) {\n      return;\n    }\n\n    this.#elementInternals.setFormValue(this.value);\n\n    if (this.type === 'submit') {\n      this.form.requestSubmit();\n      return;\n    }\n\n    this.form.reset();\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n}\n"]}

package/button/button-base.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=button-base.styles.d.ts.map

package/button/button-base.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-base.styles.d.ts","sourceRoot":"","sources":["../../src/button/button-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwElB,CAAC"}