@maicol07/material-web 2.0.0

package/fab/_fab.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/fab-branded' as branded-* show branded-theme;
+@forward './internal/fab' show theme;

package/fab/branded-fab.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Fab, FabVariant } from './internal/fab.js';
+export { type FabSize } from './internal/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-branded-fab': MdBrandedFab;
+    }
+}
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small. Branded
+ * FABs are used to specifically call attention to branded logo icons.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdBrandedFab extends Fab {
+    /**
+     * Branded FABs have no variants
+     */
+    variant: FabVariant;
+    getRenderClasses(): {
+        primary: boolean;
+        secondary: boolean;
+        tertiary: boolean;
+        small: boolean;
+        lowered: boolean;
+        large: boolean;
+        extended: boolean;
+    };
+    static styles: CSSResultOrNative[];
+}

package/fab/branded-fab.js

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-branded-styles.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small. Branded
+ * FABs are used to specifically call attention to branded logo icons.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdBrandedFab = class MdBrandedFab extends Fab {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'primary': false,
+            'secondary': false,
+            'tertiary': false,
+            'small': false,
+        };
+    }
+};
+MdBrandedFab.styles = [sharedStyles, styles, forcedColors];
+MdBrandedFab = __decorate([
+    customElement('md-branded-fab')
+], MdBrandedFab);
+//# sourceMappingURL=branded-fab.js.map

package/fab/branded-fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAa,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAUnE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,AAA5D,CAA6D;AAfxE,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgBxB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab, FabVariant} from './internal/fab.js';\nimport {styles} from './internal/fab-branded-styles.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: FabVariant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/fab.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Fab } from './internal/fab.js';
+export { type FabVariant } from './internal/fab.js';
+export { type FabSize } from './internal/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-fab': MdFab;
+    }
+}
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFab extends Fab {
+    static styles: CSSResultOrNative[];
+}

package/fab/fab.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-styles.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdFab = class MdFab extends Fab {
+};
+MdFab.styles = [sharedStyles, styles, forcedColors];
+MdFab = __decorate([
+    customElement('md-fab')
+], MdFab);
+//# sourceMappingURL=fab.js.map

package/fab/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAWnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,WAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,AAA5D,CAA6D;AADxE,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAEjB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './internal/fab.js';\nimport {styles} from './internal/fab-styles.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type FabVariant} from './internal/fab.js';\nexport {type FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { Fab } from './internal/fab.js';
+/**
+ * Test harness for floating action buttons.
+ */
+export declare class FabHarness extends Harness<Fab> {
+    getInteractiveElement(): Promise<HTMLButtonElement>;
+}

package/fab/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for floating action buttons.
+ */
+export class FabHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.fab');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/fab/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAsB,CAAC;IAC5E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './internal/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as HTMLButtonElement;\n  }\n}\n"]}

package/fab/internal/_fab-branded.scss

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-fab-branded-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-fab-branded-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-fab-branded-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape', 'large-container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/fab/internal/_fab.scss

@@ -0,0 +1,206 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../ripple/ripple';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: ltokens.$md-comp-fab-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-fab-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-fab-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove(
+      $tokens,
+      'container-shape',
+      'large-container-shape',
+      'small-container-shape'
+    );
+
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    cursor: pointer;
+  }
+
+  :host([size='small'][touch-target='wrapper']) {
+    margin: max(0px, 48px - var(--_small-container-height));
+  }
+
+  .fab {
+    @include color(
+      (
+        'focus-icon-color': var(--_focus-icon-color),
+        'hover-icon-color': var(--_hover-icon-color),
+        'icon-color': var(--_icon-color),
+        'pressed-icon-color': var(--_pressed-icon-color),
+      )
+    );
+
+    cursor: inherit;
+
+    &.primary {
+      @include color(
+        (
+          'container-color': var(--_primary-container-color),
+          'focus-icon-color': var(--_primary-focus-icon-color),
+          'hover-icon-color': var(--_primary-hover-icon-color),
+          'hover-state-layer-color': var(--_primary-hover-state-layer-color),
+          'icon-color': var(--_primary-icon-color),
+          'pressed-icon-color': var(--_primary-pressed-icon-color),
+          'pressed-state-layer-color': var(--_primary-pressed-state-layer-color),
+          'label-text-color': var(--_primary-label-text-color),
+          'hover-label-text-color': var(--_primary-hover-label-text-color),
+          'focus-label-text-color': var(--_primary-focus-label-text-color),
+          'pressed-label-text-color': var(--_primary-pressed-label-text-color),
+        )
+      );
+    }
+
+    &.secondary {
+      @include color(
+        (
+          'container-color': var(--_secondary-container-color),
+          'focus-icon-color': var(--_secondary-focus-icon-color),
+          'hover-icon-color': var(--_secondary-hover-icon-color),
+          'hover-state-layer-color': var(--_secondary-hover-state-layer-color),
+          'icon-color': var(--_secondary-icon-color),
+          'pressed-icon-color': var(--_secondary-pressed-icon-color),
+          'pressed-state-layer-color':
+            var(--_secondary-pressed-state-layer-color),
+          'label-text-color': var(--_secondary-label-text-color),
+          'hover-label-text-color': var(--_secondary-hover-label-text-color),
+          'focus-label-text-color': var(--_secondary-focus-label-text-color),
+          'pressed-label-text-color': var(--_secondary-pressed-label-text-color),
+        )
+      );
+    }
+
+    &.tertiary {
+      @include color(
+        (
+          'container-color': var(--_tertiary-container-color),
+          'focus-icon-color': var(--_tertiary-focus-icon-color),
+          'hover-icon-color': var(--_tertiary-hover-icon-color),
+          'hover-state-layer-color': var(--_tertiary-hover-state-layer-color),
+          'icon-color': var(--_tertiary-icon-color),
+          'pressed-icon-color': var(--_tertiary-pressed-icon-color),
+          'pressed-state-layer-color':
+            var(--_tertiary-pressed-state-layer-color),
+          'label-text-color': var(--_tertiary-label-text-color),
+          'hover-label-text-color': var(--_tertiary-hover-label-text-color),
+          'focus-label-text-color': var(--_tertiary-focus-label-text-color),
+          'pressed-label-text-color': var(--_tertiary-pressed-label-text-color),
+        )
+      );
+    }
+  }
+
+  // The default content is needed because we do a bit of trickery. If there is
+  // no slotted icon we need to have `padding-inline: 20px` but if there is, we
+  // need `padding-inline: 16px 20px`.
+  //
+  // So what this approach does is make the margin / padding-inline of the outer
+  // button `padding-inline: 16px 20px`, so if there is something slotted, it
+  // renders correctly. This default content span then fills the extra `4px`
+  // inline spacing if nothing is slotted which effectively makes the button's
+  // inline spacing `20px/20px`.
+  .fab.extended slot span {
+    padding-inline-start: 4px;
+  }
+
+  .fab.small {
+    width: var(--_small-container-width);
+    height: var(--_small-container-height);
+
+    .icon ::slotted(*) {
+      width: var(--_small-icon-size);
+      height: var(--_small-icon-size);
+      font-size: var(--_small-icon-size);
+    }
+
+    &,
+    .ripple {
+      border-start-start-radius: var(--_small-container-shape-start-start);
+      border-start-end-radius: var(--_small-container-shape-start-end);
+      border-end-start-radius: var(--_small-container-shape-end-start);
+      border-end-end-radius: var(--_small-container-shape-end-end);
+    }
+
+    md-focus-ring {
+      @include focus-ring.theme(
+        (
+          'shape-start-start': var(--_small-container-shape-start-start),
+          'shape-start-end': var(--_small-container-shape-start-end),
+          'shape-end-end': var(--_small-container-shape-end-end),
+          'shape-end-start': var(--_small-container-shape-end-start),
+        )
+      );
+    }
+  }
+}
+
+@mixin color($colors) {
+  background-color: map.get($colors, 'container-color');
+
+  @include ripple.theme(
+    (
+      hover-color: map.get($colors, hover-state-layer-color),
+      pressed-color: map.get($colors, pressed-state-layer-color),
+    )
+  );
+
+  .icon ::slotted(*) {
+    color: map.get($colors, icon-color);
+  }
+
+  &:focus {
+    color: map.get($colors, focus-icon-color);
+  }
+
+  &:hover {
+    color: map.get($colors, hover-icon-color);
+  }
+
+  &:active {
+    color: map.get($colors, pressed-icon-color);
+  }
+
+  .label {
+    color: map.get($colors, label-text-color);
+
+    .fab:hover & {
+      color: map.get($colors, hover-label-text-color);
+    }
+
+    .fab:focus & {
+      color: map.get($colors, focus-label-text-color);
+    }
+
+    .fab:active & {
+      color: map.get($colors, pressed-label-text-color);
+    }
+  }
+}