@material/web 1.0.0-pre.8 → 1.0.0

package/menu/sub-menu.js

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { SubMenu } from './internal/submenu/sub-menu.js';
+import { styles } from './internal/submenu/sub-menu-styles.css.js';
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `Menu` interface and also have the `md-menu`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or
+ * `positioning=fixed` set to `true` in order to display the containing menu
+ * properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       id="anchor"
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdSubMenu = class MdSubMenu extends SubMenu {
+};
+MdSubMenu.styles = styles;
+MdSubMenu = __decorate([
+    customElement('md-sub-menu')
+], MdSubMenu);
+//# sourceMappingURL=sub-menu.js.map

package/menu/sub-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu.js","sourceRoot":"","sources":["sub-menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAC,MAAM,EAAC,MAAM,2CAA2C,CAAC;AAQjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEI,WAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO;;AACpB,gBAAM,GAAG,MAAM,AAAT,CAAU;AADrB,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAErB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {SubMenu} from './internal/submenu/sub-menu.js';\nimport {styles} from './internal/submenu/sub-menu-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-sub-menu': MdSubMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `Menu` interface and also have the `md-menu`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * This menu item will open a sub-menu that is slotted in the `submenu` slot.\n * Additionally, the containing menu must either have `has-overflow` or\n * `positioning=fixed` set to `true` in order to display the containing menu\n * properly.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-sub-menu')\nexport class MdSubMenu extends SubMenu {\n  static override styles = styles;\n}\n"]}

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@material/web",
-  "version": "1.0.0-pre.8",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "Material web components",
+  "keywords": [
+    "material",
+    "material design",
+    "design system",
+    "components",
+    "web components",
+    "lit"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/material-components/material-web.git"
@@ -19,7 +27,10 @@
     "build:ts": "wireit",
     "build:css-to-ts": "wireit",
     "build:sass": "wireit",
-    "test": "wireit"
+    "test": "wireit",
+    "build:catalog": "wireit",
+    "build:analyzer": "wireit",
+    "update-docs": "wireit"
   },
   "type": "module",
   "files": [
@@ -32,23 +43,28 @@
     "!**/test/**",
     "!**/testing/**",
     "!**/*_test.*",
-    "!.wireit/**"
+    "!.wireit/**",
+    "!catalog",
+    "!scripts/"
+  ],
+  "workspaces": [
+    "catalog"
   ],
   "dependencies": {
-    "lit": "^2.3.0",
-    "safevalues": "^0.4.3",
+    "lit": "^2.7.4 || ^3.0.0",
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@lit-labs/analyzer": "^0.9.2",
     "@types/jasmine": "^4.0.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "jasmine": "^4.5.0",
     "sass": "^1.52.3",
     "sass-true": "^6.1.0",
-    "typescript": "4.9.4",
+    "typescript": "5.1.6",
     "web-test-runner-jasmine": "^0.0.2",
-    "wireit": "^0.9.0"
+    "wireit": "^0.13.0"
   },
   "wireit": {
     "build": {
@@ -62,15 +78,21 @@
         "tsconfig.json",
         "**/*.ts",
         "!**/*.d.ts",
-        "!**/*.css.ts"
+        "!**/*.css.ts",
+        "!catalog",
+        "!scripts/",
+        "!node_modules"
       ],
       "output": [
         ".tsbuildinfo",
         "**/*.js",
         "**/*.js.map",
         "**/*.d.ts",
-        "!*.js",
-        "!types/"
+        "!css-to-ts.js",
+        "!web-test-runner.config.js",
+        "!types/",
+        "!catalog",
+        "!scripts/"
       ],
       "clean": "if-file-deleted",
       "dependencies": [
@@ -78,25 +100,34 @@
       ]
     },
     "build:css-to-ts": {
-      "command": "find . \\( -path ./.wireit -o -path ./node_modules \\) -prune -o -name '*.css' -print | xargs node css-to-ts.js",
+      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*.css' -print | xargs node css-to-ts.js",
       "files": [
-        "css-to-ts.js"
+        "css-to-ts.js",
+        "!scripts/",
+        "!node_modules"
       ],
       "output": [
-        "**/*.css.ts"
+        "**/*.css.ts",
+        "!catalog",
+        "!scripts/"
       ],
       "dependencies": [
         "build:sass"
       ]
     },
     "build:sass": {
-      "command": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -v node_modules)",
+      "command": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -vE 'node_modules|catalog')",
       "files": [
-        "**/*.scss"
+        "**/*.scss",
+        "!catalog",
+        "!scripts/",
+        "!node_modules"
       ],
       "output": [
         "**/*.css",
-        "**/*.css.map"
+        "**/*.css.map",
+        "!catalog",
+        "!scripts/"
       ]
     },
     "test": {
@@ -108,6 +139,44 @@
         "web-test-runner.config.js"
       ],
       "output": []
+    },
+    "build:catalog": {
+      "dependencies": [
+        "./catalog:build:prod"
+      ]
+    },
+    "build:analyzer": {
+      "command": "tsc -b scripts/tsconfig.json --pretty",
+      "files": [
+        "scripts/tsconfig.json",
+        "scripts/analyzer/**/*.ts",
+        "!**/*.d.ts",
+        "!**/*.css.ts"
+      ],
+      "output": [
+        "scripts/.tsbuildinfo",
+        "scripts/analyzer/**/*.js",
+        "scripts/analyzer/**/*.js.map",
+        "scripts/analyzer/**/*.d.ts"
+      ],
+      "clean": "if-file-deleted"
+    },
+    "update-docs": {
+      "command": "node scripts/analyzer/update-docs.js",
+      "files": [
+        "docs/components/*.md",
+        "**/*.ts",
+        "!**/*.d.ts",
+        "!**/*.css.ts",
+        "!catalog",
+        "!scripts/",
+        "scripts/analyzer/update-docs.js",
+        "!node_modules"
+      ],
+      "output": [],
+      "dependencies": [
+        "build:analyzer"
+      ]
     }
   }
 }

package/progress/_circular-progress.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/circular-progress' show theme;

package/progress/_linear-progress.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/linear-progress' show theme;

package/progress/circular-progress.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CircularProgress } from './internal/circular-progress.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-circular-progress': MdCircularProgress;
+    }
+}
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+export declare class MdCircularProgress extends CircularProgress {
+    static styles: import("lit").CSSResult[];
+}

package/progress/circular-progress.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { CircularProgress } from './internal/circular-progress.js';
+import { styles } from './internal/circular-progress-styles.css.js';
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+export let MdCircularProgress = class MdCircularProgress extends CircularProgress {
+};
+MdCircularProgress.styles = [styles];
+MdCircularProgress = __decorate([
+    customElement('md-circular-progress')
+], MdCircularProgress);
+//# sourceMappingURL=circular-progress.js.map

package/progress/circular-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["circular-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4CAA4C,CAAC;AAQlE;;;;;;;;;GASG;AAEI,WAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {styles} from './internal/circular-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-circular-progress': MdCircularProgress;\n  }\n}\n\n/**\n * @summary Circular progress indicators display progress by animating along an\n * invisible circular track in a clockwise direction. They can be applied\n * directly to a surface, such as a button or card.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-circular-progress')\nexport class MdCircularProgress extends CircularProgress {\n  static override styles = [styles];\n}\n"]}

package/progress/harness.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { CircularProgress } from './internal/circular-progress.js';
+import { LinearProgress } from './internal/linear-progress.js';
+/**
+ * Test harness for linear-progress.
+ */
+export declare class LinearProgressHarness extends Harness<LinearProgress> {
+    getInteractiveElement(): Promise<HTMLElement>;
+}
+/**
+ * Test harness for circular-progress.
+ */
+export declare class CircularProgressHarness extends Harness<CircularProgress> {
+    getInteractiveElement(): Promise<HTMLElement>;
+}

package/progress/harness.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for linear-progress.
+ */
+export class LinearProgressHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.querySelector('.progress');
+    }
+}
+/**
+ * Test harness for circular-progress.
+ */
+export class CircularProgressHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.querySelector('.progress');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/progress/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;AAK9C;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,OAAuB;IACvD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,WAAW,CAAE,CAAC;IAC/D,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,OAAyB;IAC3D,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,WAAW,CAAE,CAAC;IAC/D,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {CircularProgress} from './internal/circular-progress.js';\nimport {LinearProgress} from './internal/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('.progress')!;\n  }\n}\n"]}

package/progress/internal/_circular-progress.scss

@@ -0,0 +1,287 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-circular-progress-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-circular-progress-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-circular-progress-values();
+
+  // If changing this value, make sure to change $size-without-padding in the
+  // circular-progress tokens.
+  $container-padding: 4px;
+
+  // note, these value come from the m2 version but match current gm3 values.
+  // Constants:
+  //       ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+  //       ARCTIME     = 1333ms (time it takes to expand and contract arc)
+  //       ARCSTARTROT = 216 degrees (how much the start location of the arc
+  //                                 should rotate each time, 216 gives us a
+  //                                 5 pointed star shape (it's 360/5 * 3).
+  //                                 For a 7 pointed star, we might do
+  //                                 360/7 * 3 = 154.286)
+  // ARCTIME
+  $arc-duration: 1333ms;
+  // 4 * ARCTIME
+  $cycle-duration: calc(4 * $arc-duration);
+  // ARCTIME * 360 / (ARCSTARTROT + (360-ARCSIZE))
+  $linear-rotate-duration: calc($arc-duration * 360 / 306);
+
+  $indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-circular-progress-#{$token}, #{$value});
+    }
+
+    display: inline-flex;
+    vertical-align: middle;
+    min-block-size: var(--_size);
+    min-inline-size: var(--_size);
+    position: relative;
+    align-items: center;
+    justify-content: center;
+
+    // `contain` and `content-visibility` are performance optimizations
+    // important here because progress indicators are often used when a cpu
+    // intensive task is underway so it's especially important to minimize
+    // their cpu consumption.
+    contain: strict;
+    content-visibility: auto;
+  }
+
+  .progress {
+    flex: 1;
+    align-self: stretch;
+    margin: $container-padding;
+  }
+
+  .progress,
+  .spinner,
+  .left,
+  .right,
+  .circle,
+  svg,
+  .track,
+  .active-track {
+    position: absolute;
+    inset: 0;
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+
+  circle {
+    cx: 50%;
+    cy: 50%;
+    r: calc(50% * (1 - var(--_active-indicator-width) / 100));
+    // match size to indeterminate border width
+    stroke-width: calc(var(--_active-indicator-width) * 1%);
+    // note, pathLength is set so this can be normalized
+    stroke-dasharray: 100;
+    fill: transparent;
+  }
+
+  .active-track {
+    // note, these value come from the m2 version but match current gm3 values.
+    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
+    stroke: var(--_active-indicator-color);
+  }
+
+  .track {
+    stroke: transparent;
+  }
+
+  .progress.indeterminate {
+    animation: linear infinite linear-rotate;
+    animation-duration: $linear-rotate-duration;
+  }
+
+  .spinner {
+    animation: infinite both rotate-arc;
+    animation-duration: $cycle-duration;
+    animation-timing-function: $indeterminate-easing;
+  }
+
+  .left {
+    overflow: hidden;
+    inset: 0 50% 0 0;
+  }
+
+  .right {
+    overflow: hidden;
+    inset: 0 0 0 50%;
+  }
+
+  .circle {
+    box-sizing: border-box;
+    border-radius: 50%;
+    // match size to svg stroke width, which is a fraction of the overall
+    // padding box width.
+    $_padding-box-width: calc(var(--_size) - 2 * $container-padding);
+    $_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);
+    border: solid calc($_active-indicator-fraction * $_padding-box-width);
+    border-color: var(--_active-indicator-color) var(--_active-indicator-color)
+      transparent transparent;
+    animation: expand-arc;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    animation-duration: $arc-duration, $cycle-duration;
+    animation-timing-function: $indeterminate-easing;
+  }
+
+  .four-color .circle {
+    animation-name: expand-arc, four-color;
+  }
+
+  .left .circle {
+    rotate: 135deg;
+    inset: 0 -100% 0 0;
+  }
+  .right .circle {
+    rotate: 100deg;
+    inset: 0 0 0 -100%;
+    animation-delay: calc(-0.5 * $arc-duration), 0ms;
+  }
+
+  @media (forced-colors: active) {
+    .active-track {
+      stroke: CanvasText;
+    }
+
+    .circle {
+      border-color: CanvasText CanvasText Canvas Canvas;
+    }
+  }
+
+  // Indeterminate mode is 3 animations composed together:
+  // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.
+  // 2. rotate-arc: at the same time, the arc is rotated in increments
+  // of 270deg.
+  // 3. linear-rotate: that rotating arc is then linearly rotated to produce
+  // a spinning expanding/contracting arc.
+  //
+  // See original implementation:
+  // https://github.com/PolymerElements/paper-spinner/blob/master/paper-spinner-styles.js.
+
+  // 1. expand-arc
+  // This is used on 2 divs which each represent half the desired
+  // 270deg arc with one offset by 50%. This creates an arc which expands from
+  // 10deg to 270deg.
+  @keyframes expand-arc {
+    0% {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(265deg);
+    }
+  }
+
+  // 2. rotate-arc
+  // The arc seamlessly travels around the circle indefinitely so it needs to
+  // end at a full rotation of the circle. This rotates the 270 deg
+  // (270/360 = 3/4) arc 4x (4 * 3/4 = 3) so it ends at
+  // (3 * 360 = 1080).
+  // This is sub-divided into increments of 135deg since the arc is rendered
+  // with 2 divs acting together.
+  @keyframes rotate-arc {
+    12.5% {
+      transform: rotate(135deg);
+    }
+    25% {
+      transform: rotate(270deg);
+    }
+    37.5% {
+      transform: rotate(405deg);
+    }
+    50% {
+      transform: rotate(540deg);
+    }
+    62.5% {
+      transform: rotate(675deg);
+    }
+    75% {
+      transform: rotate(810deg);
+    }
+    87.5% {
+      transform: rotate(945deg);
+    }
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+
+  // 3. linear-rotate
+  // The traveling expanding arc is linearly rotated to produce the spinner
+  // effect.
+  @keyframes linear-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // This animates between 4 colors which are each shown for 25% of the time.
+  // Each color is shown solid for 3/5 of that time (3/5 * 25% = 15%) and
+  // transitions to the next color for 2/5 of that time (2/5 * 25% = 10%).
+  @keyframes four-color {
+    0% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    15% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    25% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    40% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    50% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    65% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    75% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    90% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    100% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+  }
+}